Upgrade frontend dependencies (part 1) #12468

tommyip · 2019-06-02T11:17:11Z

Upgrade low-impact (patch and minor level updates) frontend dependencies.
The remaining packages that need to be updated in another PR are either:

New major version
jQuery (deprecated positional selector in favor of positional methods, eg :first -> .first())
to-markdown (renamed to Turndown, and API changes)
css-hot-loader (mini-css-extract-plugin can now do hot-module-replacement so this is not needed anymore)
emoji-datasource-(google|twitter) (our current codebase have some inconsistent reference to the old EmojiOne source and the new emoji-datasource package removed EmojiOne in v4.1.0, need to investigate into this more)

@timabbott should each commit bump the provision version or just the final one?

Testing Plan:
Read all the change logs to check if there are any breaking changes / manual testing

GIFs or Screenshots:

tommyip · 2019-06-02T12:01:59Z

Interesting, I can't reproduce the tools/webpack.config.ts(4,35): error TS2307: Cannot find module 'webpack-dev-server'. error when running ./tools/minify-js locally.

priyank-p · 2019-06-02T14:19:03Z

should each commit bump the provision version or just the final one?

Usually the final commit should bump the provision version. Since when all the dependencies upgrade commit are merged we only have to bump the version once so others do tools/provision.

priyank-p · 2019-06-02T14:29:00Z

tools/webpack.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path';
 import * as BundleTracker from 'webpack-bundle-tracker';
 import * as webpack from 'webpack';
+import * as webpackDevServer from 'webpack-dev-server';


This is what causes the failure in travis ci because webpack-dev-server is a marked as a dev dependency hence not installed during the production install workflow. You can't reproduce this failure locally since tools/provision installs webpack-dev-server.

priyank-p · 2019-06-02T14:30:27Z

tools/webpack.config.ts

@@ -16,9 +17,13 @@ function getHotCSS(bundle: any[], isProd: boolean): any[] {
    ].concat(bundle);
 }

-export default (env?: string): webpack.Configuration => {
+interface Configuration extends webpack.Configuration {
+    devServer?: webpackDevServer.Configuration;


Does webpack types really does not have types for devServer config? I'd expect them to have that since it part of webpack configuration.

There are typescript types avalible for webpack-dev-server at @types/webpack-dev-server. I think you can use them instead of having to import webpack-dev-server since that's and extra dependency that we don't want to install in production.

The devServer member was moved out of webpack into webpack-dev-server in one of the new versions.

tommyip · 2019-06-02T15:36:29Z

@priyank-p cool thanks for the help!

timabbott · 2019-06-02T17:28:33Z

Looks like it's failing the frontend linter in CI.

For the emoji thing, @HarshitOnGitHub can probably provide the backstory.

Updated .eslintrc with new rules.

v1.41.0 introduced the {resposive: true} option, we could use it.

v7.1.0 allows the loader to use any sass implementation. The new reference implementation of sass, dart-sass, is faster than libsass in toy benchmarks but perform about the same when compiling bootstrap. So we will stay on libsass for now.

Also set it to concrete version.

The loader is not currently used.

webpack 4.20.0 require webpack-cli 3.1.1.

priyank-p · 2019-06-03T12:09:12Z

(Just want to mention that the webpack upgrade along with webpack-dev-server fixed the bug we face before.)

timabbott · 2019-06-03T19:33:53Z

This is great, merged, thanks @tommyip and @priyank-p! Aside from continuing work on upgrading the rest, can you do a follow-up test of using testing responsive:true on our /stats charts? https://zulip.readthedocs.io/en/latest/subsystems/analytics.html has docs on how to test that page using the "analytics" realm. Or open an issue.

Again, huge thanks for doing this upgrade!

tommyip · 2019-06-04T01:56:10Z

Yeah I will work on that. The stats page need some restructuring to allow the responsive option to work properly since we are currently fixing the charts to 750px wide.

zulipbot added the size: XL label Jun 2, 2019

tommyip force-pushed the upgrade-deps branch from ba2ab83 to a09d80d Compare June 2, 2019 11:32

priyank-p reviewed Jun 2, 2019

View reviewed changes

tommyip force-pushed the upgrade-deps branch 2 times, most recently from 69ef362 to 36a0336 Compare June 2, 2019 16:08

tommyip added 17 commits June 3, 2019 12:30

dependencies: Upgrade yarn to 1.16.0.

c159942

dependencies: Upgrade packages with patch level updates.

e000eef

dependencies: Upgrade @typescript-eslint/eslint-plugin to 1.9.0.

1ee7492

Updated .eslintrc with new rules.

dependencies: Upgrade @typescript-eslint/parser to 1.9.0.

4a2f9fc

dependencies: Upgrade eslint to 5.16.0.

db41dae

dependencies: Upgrade handlebars to 4.1.2.

d86984d

dependencies: Upgrade htmlparser2 to 3.10.1.

f0d8d14

dependencies: Upgrade jquery-validation to 1.19.0.

3d7b186

dependencies: Upgrade moment(-timezone) to 2.24.0 (0.5.25).

374767c

dependencies: Upgrade node-sass to 4.12.0.

745261b

dependencies: Upgrade nwmatcher to 1.44.0.

74ee424

dependencies: Upgrade plotly.js to 1.48.1.

4f539ec

v1.41.0 introduced the {resposive: true} option, we could use it.

dependencies: Upgrade sass-loader to 7.1.0.

507226b

v7.1.0 allows the loader to use any sass implementation. The new reference implementation of sass, dart-sass, is faster than libsass in toy benchmarks but perform about the same when compiling bootstrap. So we will stay on libsass for now.

dependencies: Upgrade sortablejs to 1.9.0.

6ae3556

Also set it to concrete version.

dependencies: Remove source-map-loader.

ac21149

The loader is not currently used.

dependencies: Upgrade source-sans-pro to 2.45.0.

b91dc6a

dependencies: Upgrade svgo to 1.2.2.

69a23bd

tommyip force-pushed the upgrade-deps branch from 36a0336 to cc3fa25 Compare June 3, 2019 04:31

tommyip added 3 commits June 3, 2019 12:45

dependencies: Upgrade webpack(-cli) to 4.32.2 (3.3.2).

9c9f62c

webpack 4.20.0 require webpack-cli 3.1.1.

dependencies: Upgrade webpack-dev-server to 3.5.1 and install types.

b6fb473

eslint: Allow unused variables with _ prefix in typescript.

f3838fb

tommyip added 2 commits June 3, 2019 12:46

dependencies: Upgrade typescript to 3.5.1.

42b22f3

dependencies: Upgrade winchan to 0.2.1.

413bded

tommyip force-pushed the upgrade-deps branch from cc3fa25 to 413bded Compare June 3, 2019 04:48

timabbott closed this Jun 3, 2019

tommyip deleted the upgrade-deps branch June 4, 2019 01:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade frontend dependencies (part 1) #12468

Upgrade frontend dependencies (part 1) #12468

tommyip commented Jun 2, 2019 •

edited

Loading

tommyip commented Jun 2, 2019 •

edited

Loading

priyank-p commented Jun 2, 2019

priyank-p Jun 2, 2019

priyank-p Jun 2, 2019

priyank-p Jun 2, 2019

tommyip Jun 2, 2019

tommyip commented Jun 2, 2019

timabbott commented Jun 2, 2019

priyank-p commented Jun 3, 2019

timabbott commented Jun 3, 2019

tommyip commented Jun 4, 2019

Upgrade frontend dependencies (part 1) #12468

Upgrade frontend dependencies (part 1) #12468

Conversation

tommyip commented Jun 2, 2019 • edited Loading

tommyip commented Jun 2, 2019 • edited Loading

priyank-p commented Jun 2, 2019

priyank-p Jun 2, 2019

Choose a reason for hiding this comment

priyank-p Jun 2, 2019

Choose a reason for hiding this comment

priyank-p Jun 2, 2019

Choose a reason for hiding this comment

tommyip Jun 2, 2019

Choose a reason for hiding this comment

tommyip commented Jun 2, 2019

timabbott commented Jun 2, 2019

priyank-p commented Jun 3, 2019

timabbott commented Jun 3, 2019

tommyip commented Jun 4, 2019

tommyip commented Jun 2, 2019 •

edited

Loading

tommyip commented Jun 2, 2019 •

edited

Loading