Upgrade Flow to 0.153.0

https://github.com/facebook/flow/releases/tag/v0.153.0

Most of the fixes are related to the ban on method unbinding. In other
areas I've fixed or improved cases of our object types being wonky,
particularly in the expand2 code.

I've tried to isolate cases where we use a "VarArgsClass" from cases
where we use a plain object to avoid conflicts there.

Author: mwiencek

package.json

@@ -80,7 +80,7 @@
     "eslint-plugin-react": "7.20.6",
     "eslint-plugin-react-hooks": "4.1.2",
     "file-url": "2.0.2",
-    "flow-bin": "0.152.0",
+    "flow-bin": "0.153.0",
     "gettext-parser": "3.1.0",
     "http-proxy": "1.18.1",
     "jsdom": "13.2.0",

root/layout/components/ExternalLinks.js

@@ -144,8 +144,8 @@ const ExternalLinks = ({
     ));
 
   // We ensure official sites are listed above blogs, and blogs above others
-  links.push.apply(links, blogLinks);
-  links.push.apply(links, uniqueOtherLinks.map(({id, ...props}) => (
+  links.push(...blogLinks);
+  links.push(...uniqueOtherLinks.map(({id, ...props}) => (
     <ExternalLink key={id} {...props} />
   )));
 

root/server/gettext.js

@@ -52,15 +52,26 @@ exports.loadDomain = function (domain /*: string */) {
 };
 
 exports.jedInstance = jedInstance;
+
 exports.dgettext = (
-  jedInstance.dgettext.bind(jedInstance)
-  /*: ((string, string) => string) */
-);
+  domain/*: string */,
+  key/*: string */,
+)/*: string */ => jedInstance.dgettext(domain, key);
+
 exports.dngettext = (
-  jedInstance.dngettext.bind(jedInstance)
-  /*: ((string, string, string, number) => string) */
+  domain/*: string */,
+  singularKey/*: string */,
+  pluralKey/*: string */,
+  value/*: number */,
+)/*: string */ => jedInstance.dngettext(
+  domain,
+  singularKey,
+  pluralKey,
+  value,
 );
+
 exports.dpgettext = (
-  jedInstance.dpgettext.bind(jedInstance)
-  /*: ((string, string, string) => string) */
-);
+  domain/*: string */,
+  context/*: string */,
+  key/*: string */,
+)/*: string */ => jedInstance.dpgettext(domain, context, key);

root/static/scripts/common/components/TagEditor.js

@@ -554,7 +554,7 @@ export const MainTagEditor = (hydrate<TagEditorProps>(
                 </p>
               )}
               <p>
-                <a href="#" onClick={this.showAllTags.bind(this)}>
+                <a href="#" onClick={(event) => this.showAllTags(event)}>
                   {l('Show all tags.')}
                 </a>
               </p>
@@ -568,7 +568,10 @@ export const MainTagEditor = (hydrate<TagEditorProps>(
               </p>
               {this.props.$c.user?.has_confirmed_email_address ? (
                 <p>
-                  <a href="#" onClick={this.hideNegativeTags.bind(this)}>
+                  <a
+                    href="#"
+                    onClick={(event) => this.hideNegativeTags(event)}
+                  >
                     {l(
                       `Hide tags with a score of zero or below,
                        and tags that you’ve downvoted.`,
@@ -577,7 +580,10 @@ export const MainTagEditor = (hydrate<TagEditorProps>(
                 </p>
               ) : (
                 <p>
-                  <a href="#" onClick={this.hideNegativeTags.bind(this)}>
+                  <a
+                    href="#"
+                    onClick={(event) => this.hideNegativeTags(event)}
+                  >
                     {l('Hide tags with a score of zero or below.')}
                   </a>
                 </p>

root/static/scripts/common/i18n/expand2.js

@@ -32,12 +32,15 @@ export function gotMatch(x: mixed): boolean %checks {
 }
 
 export type VarArgsObject<+T> = {
-  __proto__: empty,
   +[arg: string]: T,
-  ...
 };
 
-export class VarArgs<+T, +U = T> {
+export interface VarArgsClass<+T> {
+  get(name: string): T,
+  has(name: string): boolean,
+}
+
+export class VarArgs<+T, +U = T> implements VarArgsClass<T | U> {
   +data: VarArgsObject<T>;
 
   constructor(data: VarArgsObject<T>) {
@@ -53,9 +56,10 @@ export class VarArgs<+T, +U = T> {
   }
 }
 
-export type Parser<+T, -V> = (VarArgs<V>) => T;
+export type Parser<+T, -V> = (VarArgsClass<V>) => T;
 
 const EMPTY_OBJECT = Object.freeze({});
+const EMPTY_VARARGS = new VarArgs(EMPTY_OBJECT);
 
 type State = {
   /*
@@ -140,7 +144,7 @@ export function saveMatch<T, V>(cb: Parser<T, V>): Parser<T, V> {
 
 export function parseContinuous<T, U, V>(
   parsers: $ReadOnlyArray<Parser<T | NO_MATCH, V>>,
-  args: VarArgs<V>,
+  args: VarArgsClass<V>,
   matchCallback: (U | NO_MATCH, T) => U,
   defaultValue: U,
 ): U {
@@ -178,7 +182,7 @@ function concatStringMatch(
 
 export function parseContinuousString<V>(
   parsers: $ReadOnlyArray<Parser<string | NO_MATCH, V>>,
-  args: VarArgs<V>,
+  args: VarArgsClass<V>,
 ): string {
   return parseContinuous<string, string, V>(
     parsers,
@@ -202,16 +206,18 @@ export const createTextContentParser = <+T, V>(
 const varSubst = /^\{([0-9A-z_]+)\}/;
 export const createVarSubstParser = <T, V>(
   argFilter: (V) => T,
-): Parser<T | string | NO_MATCH, V> => saveMatch(function (args: VarArgs<V>) {
-  const name = accept(varSubst);
-  if (typeof name !== 'string') {
-    return NO_MATCH_VALUE;
-  }
-  if (args.has(name)) {
-    return argFilter(args.get(name));
-  }
-  return state.match;
-});
+): Parser<T | string | NO_MATCH, V> => saveMatch(
+  function (args: VarArgsClass<V>) {
+    const name = accept(varSubst);
+    if (typeof name !== 'string') {
+      return NO_MATCH_VALUE;
+    }
+    if (args.has(name)) {
+      return argFilter(args.get(name));
+    }
+    return state.match;
+  },
+);
 
 export const parseStringVarSubst: Parser<string | NO_MATCH, mixed> =
   createVarSubstParser<string, mixed>(getString);
@@ -271,9 +277,9 @@ export const createCondSubstParser = <T, V>(
  * and input arg values.
  */
 export default function expand<+T, V>(
-  rootParser: (VarArgs<V>) => T,
+  rootParser: (VarArgsClass<V>) => T,
   source: ?string,
-  args: ?(VarArgsObject<V> | VarArgs<V>),
+  args: ?VarArgsClass<V>,
 ): T | string {
   if (!source) {
     return '';
@@ -292,13 +298,9 @@ export default function expand<+T, V>(
   state.running = true;
   state.source = source;
 
-  if (!(args instanceof VarArgs)) {
-    args = new VarArgs<V>(args ?? EMPTY_OBJECT);
-  }
-
   let result;
   try {
-    result = rootParser(args);
+    result = rootParser(args ?? EMPTY_VARARGS);
 
     if (state.remainder) {
       throw error('unexpected token');

root/static/scripts/common/i18n/expand2html.js

@@ -9,11 +9,12 @@
 
 import * as ReactDOMServer from 'react-dom/server';
 
+import type {VarArgsObject} from './expand2';
 import expand2react from './expand2react';
 
 export default function expand2html(
   source: string,
-  args?: ?{+[arg: string]: Expand2ReactInput},
+  args?: ?VarArgsObject<Expand2ReactInput>,
 ): string {
   return ReactDOMServer.renderToStaticMarkup(
     expand2react(source, args),

root/static/scripts/common/i18n/expand2react.js

@@ -31,9 +31,11 @@ import expand, {
   saveMatch,
   state,
   substEnd,
+  VarArgs,
   type NO_MATCH,
   type Parser,
-  type VarArgs,
+  type VarArgsObject,
+  type VarArgsClass,
 } from './expand2';
 
 type Input = Expand2ReactInput;
@@ -181,7 +183,7 @@ function concatArrayMatch<T: MatchUpperBoundT>(
 
 function parseContinuousArray<T: MatchUpperBoundT, V>(
   parsers: $ReadOnlyArray<Parser<Array<T> | T | NO_MATCH, V>>,
-  args: VarArgs<V>,
+  args: VarArgsClass<V>,
 ): Array<T> {
   return parseContinuous<Array<T> | T, Array<T>, V>(
     parsers,
@@ -363,7 +365,17 @@ const parseRoot = args => parseContinuousArray(rootParsers, args);
  */
 export default function expand2react(
   source: string,
-  args?: ?{+[arg: string]: Input, ...},
+  args?: ?VarArgsObject<Input>,
+): Output {
+  return expand2reactWithVarArgsInstance(
+    source,
+    args ? new VarArgs(args) : null,
+  );
+}
+
+export function expand2reactWithVarArgsInstance(
+  source: string,
+  args?: ?VarArgsClass<Input>,
 ): Output {
   const result = expand<$ReadOnlyArray<Output>, Input>(
     parseRoot,
@@ -382,18 +394,18 @@ export default function expand2react(
 
 export const l = (
   key: string,
-  args?: ?{+[arg: string]: Input, ...},
+  args?: ?VarArgsObject<Input>,
 ): Output => expand2react(lActual(key), args);
 
 export const ln = (
   skey: string,
   pkey: string,
   val: number,
-  args?: ?{+[arg: string]: Input, ...},
+  args?: ?VarArgsObject<Input>,
 ): Output => expand2react(lnActual(skey, pkey, val), args);
 
 export const lp = (
   key: string,
   context: string,
-  args?: ?{+[arg: string]: Input, ...},
+  args?: ?VarArgsObject<Input>,
 ): Output => expand2react(lpActual(key, context), args);

root/static/scripts/common/i18n/expand2text.js

@@ -13,6 +13,9 @@ import expand, {
   parseContinuousString,
   parseStringVarSubst,
   state,
+  VarArgs,
+  type VarArgsObject,
+  type VarArgsClass,
 } from './expand2';
 import {
   l as lActual,
@@ -80,25 +83,32 @@ function parseRoot(args) {
  */
 export default function expand2text(
   source: string,
-  args: {+[arg: string]: StrOrNum, ...},
+  args: VarArgsObject<StrOrNum>,
+): string {
+  return expand2textWithVarArgsClass(source, new VarArgs(args));
+}
+
+export function expand2textWithVarArgsClass(
+  source: string,
+  args: VarArgsClass<StrOrNum>,
 ): string {
   return expand<string, StrOrNum>(parseRoot, source, args);
 }
 
 export const l = (
   key: string,
-  args: {+[arg: string]: StrOrNum, ...},
+  args: VarArgsObject<StrOrNum>,
 ): string => expand2text(lActual(key), args);
 
 export const ln = (
   skey: string,
   pkey: string,
   val: number,
-  args: {+[arg: string]: StrOrNum, ...},
+  args: VarArgsObject<StrOrNum>,
 ): string => expand2text(lnActual(skey, pkey, val), args);
 
 export const lp = (
   key: string,
   context: string,
-  args: {+[arg: string]: StrOrNum, ...},
+  args: VarArgsObject<StrOrNum>,
 ): string => expand2text(lpActual(key, context), args);

root/static/scripts/common/linkedEntities.js

@@ -97,6 +97,9 @@ export type LinkedEntitiesT = {
 };
 */
 
+// $FlowIgnore[method-unbinding]
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 const EMPTY_OBJECT = Object.freeze({});
 
 const linkedEntities/*: LinkedEntitiesT */ = Object.create(Object.seal({
@@ -121,7 +124,7 @@ const linkedEntities/*: LinkedEntitiesT */ = Object.create(Object.seal({
   mergeLinkedEntities(update/*: ?$Shape<LinkedEntitiesT> */) {
     if (update) {
       for (const [type, entities] of Object.entries(update)) {
-        if (Object.prototype.hasOwnProperty.call(linkedEntities, type)) {
+        if (hasOwnProperty.call(linkedEntities, type)) {
           Object.assign(linkedEntities[type], entities);
         } else {
           linkedEntities[type] = entities;

root/static/scripts/common/utility/cloneDeep.js

@@ -50,14 +50,14 @@ function cloneArrayDeep/*:: <+T> */(
  * This module is imported by our Webpack config file, so don't use
  * `hasOwnProp` here. It's not available!
  */
+// $FlowIgnore[method-unbinding]
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 function _cloneObjectDeep/*:: <+T: {...}> */(
   object/*: T */,
   seen/*: WeakMap<any, any> */,
 )/*: T */ {
-  const clone/*: any */ = {};
-  Object.setPrototypeOf(clone, Object.getPrototypeOf(object));
+  const clone/*: any */ = Object.create(Object.getPrototypeOf(object));
   seen.set(object, clone);
   for (const key in object) {
     if (hasOwnProperty.call(object, key)) {

root/static/scripts/common/utility/deepEqual.js

@@ -13,6 +13,7 @@
 /* eslint-disable import/no-commonjs */
 
 const objectPrototype = Object.prototype;
+// $FlowIgnore[method-unbinding]
 const hasOwnProperty = objectPrototype.hasOwnProperty;
 
 function deepEqual(

root/static/scripts/common/utility/hasOwnProp.js

@@ -7,6 +7,7 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
+// $FlowIgnore[method-unbinding]
 const objectHasOwnProperty = Object.prototype.hasOwnProperty;
 
 export default function hasOwnProp(

root/static/scripts/common/utility/parseCookie.js

@@ -16,6 +16,7 @@
 
 const {parse} = require('cookie');
 
+// $FlowIgnore[method-unbinding]
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 function parseCookie(

root/static/scripts/edit/components/edit/RelationshipDiff.js

@@ -14,8 +14,10 @@ import relationshipDateText
 import {INSERT, DELETE} from '../../utility/editDiff';
 import DescriptiveLink from '../../../common/components/DescriptiveLink';
 import commaList from '../../../common/i18n/commaList';
-import expand2react, {hooks as expand2reactHooks}
-  from '../../../common/i18n/expand2react';
+import {
+  expand2reactWithVarArgsInstance,
+  hooks as expand2reactHooks,
+} from '../../../common/i18n/expand2react';
 import linkedEntities from '../../../common/linkedEntities';
 import {keyBy} from '../../../common/utility/arrays';
 import bracketed from '../../../common/utility/bracketed';
@@ -66,7 +68,7 @@ const RelationshipDiff = ({
 
       return display;
     },
-    expand: expand2react,
+    expand: expand2reactWithVarArgsInstance,
   };
 
   const oldLinkType = linkedEntities.link_type[oldRelationship.linkTypeID];