Update dependencies (#277)

* update dependencies

* fix eslint warnings

* remove redundant sass-loader

web/app/components/auth-panel/auth-panel.jsx

@@ -77,46 +77,45 @@ export default class AuthPanel extends Component {
           </div>
         )}
 
-        {IS_STORAGE_AVAILABLE &&
-          !loggedIn && (
-            <div className="auth-panel__column">
-              Sign in to comment using{' '}
-              {providers.map((provider, i) => {
-                const comma = i === 0 ? '' : i === providers.length - 1 ? ' or ' : ', ';
+        {IS_STORAGE_AVAILABLE && !loggedIn && (
+          <div className="auth-panel__column">
+            Sign in to comment using{' '}
+            {providers.map((provider, i) => {
+              const comma = i === 0 ? '' : i === providers.length - 1 ? ' or ' : ', ';
 
-                return (
-                  <span>
-                    {comma}
-                    <span
-                      className="auth-panel__pseudo-link"
-                      {...getHandleClickProps(() => props.onSignIn(provider))}
-                      role="link"
-                    >
-                      {PROVIDER_NAMES[provider]}
-                    </span>
+              return (
+                <span>
+                  {comma}
+                  <span
+                    className="auth-panel__pseudo-link"
+                    {...getHandleClickProps(() => props.onSignIn(provider))}
+                    role="link"
+                  >
+                    {PROVIDER_NAMES[provider]}
                   </span>
-                );
-              })}
-              {'.'}
-            </div>
-          )}
+                </span>
+              );
+            })}
+            {'.'}
+          </div>
+        )}
 
-        {!IS_STORAGE_AVAILABLE &&
-          IS_THIRD_PARTY && (
-            <div className="auth-panel__column">
-              Disable third-party cookies blocking to sign in or open comments in{' '}
-              <a
-                class="auth-panel__pseudo-link"
-                href={`${window.location.origin}/web/comments.html${window.location.search}`}
-                target="_blank"
-              >
-                new page
-              </a>
-            </div>
-          )}
+        {!IS_STORAGE_AVAILABLE && IS_THIRD_PARTY && (
+          <div className="auth-panel__column">
+            Disable third-party cookies blocking to sign in or open comments in{' '}
+            <a
+              class="auth-panel__pseudo-link"
+              href={`${window.location.origin}/web/comments.html${window.location.search}`}
+              target="_blank"
+            >
+              new page
+            </a>
+          </div>
+        )}
 
-        {!IS_STORAGE_AVAILABLE &&
-          !IS_THIRD_PARTY && <div className="auth-panel__column">Allow cookies to sign in and comment</div>}
+        {!IS_STORAGE_AVAILABLE && !IS_THIRD_PARTY && (
+          <div className="auth-panel__column">Allow cookies to sign in and comment</div>
+        )}
 
         <div className="auth-panel__column">
           {user.admin && (

web/app/components/comment/comment.jsx

@@ -451,10 +451,10 @@ export default class Comment extends Component {
           ? getTextSnippet(data.text)
           : data.text
         : userBlocked
-          ? 'This user was blocked'
-          : deleted
-            ? 'This comment was deleted'
-            : data.text,
+        ? 'This user was blocked'
+        : deleted
+        ? 'This comment was deleted'
+        : data.text,
       time: formatTime(new Date(data.time)),
       orig: isEditing
         ? data.orig &&
@@ -520,14 +520,13 @@ export default class Comment extends Component {
         className={b('comment', props, defaultMods)}
         id={mods.disabled ? null : `${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}
       >
-        {mods.view === 'user' &&
-          o.title && (
-            <div className="comment__title">
-              <a className="comment__title-link" href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
-                {o.title}
-              </a>
-            </div>
-          )}
+        {mods.view === 'user' && o.title && (
+          <div className="comment__title">
+            <a className="comment__title-link" href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}>
+              {o.title}
+            </a>
+          </div>
+        )}
         <div className="comment__body">
           <div className="comment__info">
             {mods.view !== 'user' && <Avatar picture={o.user.picture} />}
@@ -542,52 +541,47 @@ export default class Comment extends Component {
               </span>
             )}
 
-            {isAdmin &&
-              mods.view !== 'user' && (
-                <span
-                  {...getHandleClickProps(() => this.toggleVerify(o.user.verified))}
-                  aria-label="Toggle verification"
-                  title={o.user.verified ? 'Verified user' : 'Unverified user'}
-                  className={b('comment__verification', {}, { active: o.user.verified, clickable: true })}
-                />
-              )}
+            {isAdmin && mods.view !== 'user' && (
+              <span
+                {...getHandleClickProps(() => this.toggleVerify(o.user.verified))}
+                aria-label="Toggle verification"
+                title={o.user.verified ? 'Verified user' : 'Unverified user'}
+                className={b('comment__verification', {}, { active: o.user.verified, clickable: true })}
+              />
+            )}
 
-            {!isAdmin &&
-              !!o.user.verified &&
-              mods.view !== 'user' && (
-                <span title="Verified user" className={b('comment__verification', {}, { active: true })} />
-              )}
+            {!isAdmin && !!o.user.verified && mods.view !== 'user' && (
+              <span title="Verified user" className={b('comment__verification', {}, { active: true })} />
+            )}
 
             <a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__time">
               {o.time}
             </a>
 
-            {mods.level > 0 &&
-              mods.view !== 'user' && (
-                <a
-                  className="comment__link-to-parent"
-                  href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
-                  aria-label="Go to parent comment"
-                  title="Go to parent comment"
-                  onClick={this.scrollToParent}
-                >
-                  {' '}
-                </a>
-              )}
+            {mods.level > 0 && mods.view !== 'user' && (
+              <a
+                className="comment__link-to-parent"
+                href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.pid}`}
+                aria-label="Go to parent comment"
+                title="Go to parent comment"
+                onClick={this.scrollToParent}
+              >
+                {' '}
+              </a>
+            )}
 
             {isAdmin && userBlocked && mods.view !== 'user' && <span className="comment__status">Blocked</span>}
 
             {isAdmin && !userBlocked && deleted && <span className="comment__status">Deleted</span>}
 
-            {!mods.disabled &&
-              mods.view !== 'user' && (
-                <span
-                  {...getHandleClickProps(this.toggleCollapse)}
-                  className={b('comment__action', {}, { type: 'collapse', selected: mods.collapsed })}
-                >
-                  {mods.collapsed ? '+' : '−'}
-                </span>
-              )}
+            {!mods.disabled && mods.view !== 'user' && (
+              <span
+                {...getHandleClickProps(this.toggleCollapse)}
+                className={b('comment__action', {}, { type: 'collapse', selected: mods.collapsed })}
+              >
+                {mods.collapsed ? '+' : '−'}
+              </span>
+            )}
 
             <span className={b('comment__score', {}, { view: o.score.view })}>
               <span
@@ -636,15 +630,11 @@ export default class Comment extends Component {
           />
 
           <div className="comment__actions">
-            {!deleted &&
-              !isCommentsDisabled &&
-              !mods.disabled &&
-              !isGuest &&
-              mods.view !== 'user' && (
-                <span {...getHandleClickProps(this.toggleReplying)} className="comment__action">
-                  {isReplying ? 'Cancel' : 'Reply'}
-                </span>
-              )}
+            {!deleted && !isCommentsDisabled && !mods.disabled && !isGuest && mods.view !== 'user' && (
+              <span {...getHandleClickProps(this.toggleReplying)} className="comment__action">
+                {isReplying ? 'Cancel' : 'Reply'}
+              </span>
+            )}
 
             {!deleted &&
               !mods.disabled &&
@@ -669,76 +659,75 @@ export default class Comment extends Component {
                 <span className="comment__edit-timer">{editTimeLeft && `${editTimeLeft}`}</span>,
               ]}
 
-            {!deleted &&
-              isAdmin && (
-                <span className="comment__controls">
-                  {!isCopied && (
-                    <span
-                      {...getHandleClickProps(() => this.copyComment({ username: o.user.name, time: o.time }))}
-                      className="comment__control"
+            {!deleted && isAdmin && (
+              <span className="comment__controls">
+                {!isCopied && (
+                  <span
+                    {...getHandleClickProps(() => this.copyComment({ username: o.user.name, time: o.time }))}
+                    className="comment__control"
+                  >
+                    Copy
+                  </span>
+                )}
+
+                {isCopied && <span className="comment__control comment__control_view_inactive">Copied!</span>}
+
+                {mods.view !== 'user' && (
+                  <span {...getHandleClickProps(() => this.togglePin(pinned))} className="comment__control">
+                    {pinned ? 'Unpin' : 'Pin'}
+                  </span>
+                )}
+
+                {userBlocked && (
+                  <span {...getHandleClickProps(() => this.onUnblockUserClick())} className="comment__control">
+                    Unblock
+                  </span>
+                )}
+
+                {!userBlocked && (
+                  <span className="comment__control comment__control_select-label">
+                    Block
+                    <select
+                      className="comment__control_select"
+                      onBlur={this.onBlockUserClick}
+                      onChange={this.onBlockUserClick}
                     >
-                      Copy
-                    </span>
-                  )}
+                      <option disabled selected value>
+                        {' '}
+                        Blocking period{' '}
+                      </option>
+                      {BLOCKING_DURATIONS.map(block => (
+                        <option value={block.value}>{block.label}</option>
+                      ))}
+                    </select>
+                  </span>
+                )}
 
-                  {isCopied && <span className="comment__control comment__control_view_inactive">Copied!</span>}
-
-                  {mods.view !== 'user' && (
-                    <span {...getHandleClickProps(() => this.togglePin(pinned))} className="comment__control">
-                      {pinned ? 'Unpin' : 'Pin'}
-                    </span>
-                  )}
-
-                  {userBlocked && (
-                    <span {...getHandleClickProps(() => this.onUnblockUserClick())} className="comment__control">
-                      Unblock
-                    </span>
-                  )}
-
-                  {!userBlocked && (
-                    <span className="comment__control comment__control_select-label">
-                      Block
-                      <select
-                        className="comment__control_select"
-                        onBlur={this.onBlockUserClick}
-                        onChange={this.onBlockUserClick}
-                      >
-                        <option disabled selected value>
-                          {' '}
-                          Blocking period{' '}
-                        </option>
-                        {BLOCKING_DURATIONS.map(block => <option value={block.value}>{block.label}</option>)}
-                      </select>
-                    </span>
-                  )}
-
-                  {!deleted && (
-                    <span {...getHandleClickProps(this.onDeleteClick)} className="comment__control">
-                      Delete
-                    </span>
-                  )}
-                </span>
-              )}
+                {!deleted && (
+                  <span {...getHandleClickProps(this.onDeleteClick)} className="comment__control">
+                    Delete
+                  </span>
+                )}
+              </span>
+            )}
           </div>
         </div>
 
-        {isReplying &&
-          mods.view !== 'user' && (
-            <Input mix="comment__input" onSubmit={this.onReply} onCancel={this.toggleReplying} pid={o.id} />
-          )}
+        {isReplying && mods.view !== 'user' && (
+          <Input mix="comment__input" onSubmit={this.onReply} onCancel={this.toggleReplying} pid={o.id} />
+        )}
 
-        {isEditing &&
-          mods.view !== 'user' && (
-            <Input
-              mix="comment__input"
-              mods={{ mode: 'edit' }}
-              onSubmit={this.onEdit}
-              onCancel={this.toggleEditing}
-              id={o.id}
-              value={o.orig}
-              errorMessage={!editTimeLeft && 'Editing time has expired.'}
-            />
-          )}
+        {isEditing && mods.view !== 'user' && (
+          <Input
+            mix="comment__input"
+            mods={{ mode: 'edit' }}
+            onSubmit={this.onEdit}
+            onCancel={this.toggleEditing}
+            id={o.id}
+            value={o.orig}
+            errorMessage={!editTimeLeft && 'Editing time has expired.'}
+          />
+        )}
       </article>
     );
   }

web/app/components/input/__field/input__field.scss

@@ -3,7 +3,7 @@
   $fontSize: 16px;
   $paddingVrt: 10px;
   $lines: 3;
-  $height: calc($fontSize * $lineHeight * $lines+$paddingVrt * 2);
+  $height: calc($fontSize * $lineHeight * $lines + $paddingVrt * 2);
 
   box-sizing: border-box;
   width: 100%;

web/app/components/root/root.jsx

@@ -298,10 +298,9 @@ export default class Root extends Component {
 
           {!isBlockedVisible && (
             <div className="root__main">
-              {!isGuest &&
-                !isCommentsDisabled && (
-                  <Input mix="root__input" mods={{ type: 'main' }} onSubmit={this.addComment} userId={user.id} />
-                )}
+              {!isGuest && !isCommentsDisabled && (
+                <Input mix="root__input" mods={{ type: 'main' }} onSubmit={this.addComment} userId={user.id} />
+              )}
 
               {!!pinnedComments.length && (
                 <div className="root__pinned-comments" role="region" aria-label="Pinned comments">
@@ -311,29 +310,27 @@ export default class Root extends Component {
                 </div>
               )}
 
-              {!!comments.length &&
-                !isCommentsListLoading && (
-                  <div className="root__threads" role="list">
-                    {(IS_MOBILE ? comments.slice(0, commentsShown) : comments).map(thread => (
-                      <Thread
-                        key={thread.comment.id}
-                        mix="root__thread"
-                        mods={{ level: 0 }}
-                        data={thread}
-                        isCommentsDisabled={isCommentsDisabled}
-                        onReply={this.addComment}
-                        onEdit={this.replaceComment}
-                      />
-                    ))}
+              {!!comments.length && !isCommentsListLoading && (
+                <div className="root__threads" role="list">
+                  {(IS_MOBILE ? comments.slice(0, commentsShown) : comments).map(thread => (
+                    <Thread
+                      key={thread.comment.id}
+                      mix="root__thread"
+                      mods={{ level: 0 }}
+                      data={thread}
+                      isCommentsDisabled={isCommentsDisabled}
+                      onReply={this.addComment}
+                      onEdit={this.replaceComment}
+                    />
+                  ))}
 
-                    {commentsShown < comments.length &&
-                      IS_MOBILE && (
-                        <button className="root__show-more" onClick={this.showMore}>
-                          Show more
-                        </button>
-                      )}
-                  </div>
-                )}
+                  {commentsShown < comments.length && IS_MOBILE && (
+                    <button className="root__show-more" onClick={this.showMore}>
+                      Show more
+                    </button>
+                  )}
+                </div>
+              )}
 
               {isCommentsListLoading && (
                 <div className="root__threads" role="list">

web/app/components/user-info/last-comments-list.jsx

@@ -11,7 +11,9 @@ const LastCommentsList = ({ comments, isLoading, mods = {} }) => {
 
   return (
     <div>
-      {comments.map(comment => <Comment data={comment} mods={{ level: 0, view: 'user', theme: mods.theme }} />)}
+      {comments.map(comment => (
+        <Comment data={comment} mods={{ level: 0, view: 'user', theme: mods.theme }} />
+      ))}
     </div>
   );
 };

web/babelOptions.js

@@ -1,14 +1,14 @@
 module.exports = {
   presets: [
     [
-      'env',
+      '@babel/preset-env',
       {
         targets: {
           browsers: ['> 1%', 'android >= 4.4.4', 'ios >= 9', 'IE >= 11'],
         },
-        useBuiltIns: true,
+        useBuiltIns: 'usage',
       },
     ],
   ],
-  plugins: ['syntax-dynamic-import', 'transform-object-rest-spread', ['transform-react-jsx', { pragma: 'h' }]],
+  plugins: ['@babel/plugin-syntax-dynamic-import', ['@babel/plugin-transform-react-jsx', { pragma: 'h' }]],
 };

web/package.json

@@ -2,14 +2,18 @@
   "name": "remark-ui",
   "version": "0.1.0",
   "scripts": {
-    "build": "webpack --config ./webpack.config.js",
-    "start": "webpack-dev-server --progress --hot --inline --config ./webpack.config.js",
+    "build": "webpack --mode production",
+    "start": "webpack-dev-server --mode development",
     "lint": "eslint --ext=.js,.jsx .",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "prettier": "prettier --write \"./**/*.{js,jsx,scss}\"",
-    "precommit": "./node_modules/.bin/lint-staged",
-    "postcommit": "git update-index --again"
+    "prettier": "prettier --write \"./**/*.{js,jsx,scss}\""
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "./node_modules/.bin/lint-staged",
+      "post-commit": "git update-index --again"
+    }
   },
   "lint-staged": {
     "linters": {
@@ -21,56 +25,55 @@
         "prettier --write",
         "git add"
       ]
-    },
-    "renderer": "silent"
+    }
   },
   "devDependencies": {
-    "autoprefixer": "^7.2.6",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.5",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.7.0",
-    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^0.28.11",
-    "eslint": "^4.19.1",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-jsx-a11y": "^6.1.0",
-    "eslint-plugin-prettier": "^2.6.1",
-    "eslint-plugin-react": "^7.10.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^0.11.1",
-    "html-webpack-plugin": "^2.30.1",
-    "husky": "^0.14.3",
-    "jest": "^23.1.0",
-    "jest-localstorage-mock": "^2.2.0",
-    "lint-staged": "^7.2.0",
-    "npm-run-all": "^4.1.3",
-    "postcss-calc": "^6.0.1",
-    "postcss-csso": "^2.0.0",
+    "autoprefixer": "^9.4.7",
+    "@babel/core": "^7.2.2",
+    "babel-eslint": "^10.0.1",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^1.0.1",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^2.1.0",
+    "eslint": "^5.14.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "mini-css-extract-plugin": "^0.5.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "^1.3.1",
+    "jest": "^24.1.0",
+    "jest-localstorage-mock": "^2.4.0",
+    "lint-staged": "^8.1.4",
+    "npm-run-all": "^4.1.5",
+    "postcss-calc": "^7.0.1",
+    "postcss-csso": "^3.0.0",
     "postcss-for": "^2.1.1",
-    "postcss-loader": "^2.1.5",
-    "postcss-nested": "^3.0.0",
-    "postcss-simple-vars": "^4.1.0",
-    "postcss-url": "^6.3.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-nested": "^4.1.1",
+    "postcss-simple-vars": "^5.0.1",
+    "postcss-url": "^8.0.0",
     "postcss-wrap": "0.0.4",
-    "prettier": "^1.13.7",
-    "style-loader": "^0.19.1",
-    "webpack": "^3.12.0",
-    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-dev-server": "^2.7.1"
+    "prettier": "^1.16.4",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.4",
+    "webpack-cli": "^3.2.3",
+    "webpack-bundle-analyzer": "^3.0.4",
+    "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
     "axios": "^0.18.0",
     "bem-react-helper": "^1.1.2",
     "core-js": "^2.5.7",
     "focus-visible": "^4.1.5",
-    "preact": "^8.2.9",
+    "preact": "^8.4.2",
     "preact-redux": "^2.0.3",
-    "redux": "^4.0.0"
+    "redux": "^4.0.1"
   },
   "eslintIgnore": [
     "public"

web/webpack.config.js

@@ -3,7 +3,7 @@
 const path = require('path');
 
 const webpack = require('webpack');
-const ExtractText = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const Clean = require('clean-webpack-plugin');
 const Copy = require('copy-webpack-plugin');
 const Html = require('html-webpack-plugin');
@@ -70,11 +70,13 @@ module.exports = {
         },
       },
       {
-        test: /\.scss$/,
-        use: ExtractText.extract({
-          fallback: 'style-loader',
-          use: commonStyleLoaders,
-        }),
+        test: /\.s?css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          ...commonStyleLoaders,
+        ],
       },
       {
         test: /\.(png|jpg|jpeg|gif|svg)$/,
@@ -119,12 +121,10 @@ module.exports = {
       filename: 'comments.html',
       inject: false,
     }),
-    new ExtractText({
-      filename: `remark.css`,
-      allChunks: true,
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
     }),
     new webpack.optimize.ModuleConcatenationPlugin(),
-    ...(env === 'production' ? [new webpack.optimize.UglifyJsPlugin()] : []),
     ...(process.env.CI
       ? []
       : [