FED-1569 Prepare for null safety: fix lints and implicit casts

.github/workflows/dart_ci.yml

@@ -15,8 +15,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        # Can't run on `beta` (Dart 3) until we're fully null-safe.
-        sdk: [2.18.7, stable]
+        # Can't run on `stable` (Dart 3) until we're fully null-safe.
+        sdk: [2.18.7]
     steps:
       - uses: actions/checkout@v2
       - uses: dart-lang/setup-dart@v1

analysis_options.yaml

@@ -1,12 +1,25 @@
+include: package:workiva_analysis_options/v2.recommended.yaml
+
 analyzer:
   strong-mode:
+    # TODO change to false as part of the null safety major, which avoids us having to add a lot more casts
     implicit-casts: true
-    implicit-dynamic: true
+  errors:
+    must_call_super: error
+    comment_references: info
+    # This is too noisy since it warns for all lifecycle methods.
+    always_declare_return_types: ignore
+    # We very often need to annotate parameters when they're embedded in Maps
+    # with dynamic values, so this lint is noisy and wrong in those cases.
+    # See: https://github.com/dart-lang/linter/issues/1099
+    avoid_types_on_closure_parameters: ignore
+    # This makes string concatenation less readable in some cases
+    prefer_interpolation_to_compose_strings: ignore
+    # The following are ignored to avoid merge conflicts with null safety branch
+    directives_ordering: ignore
+    prefer_typing_uninitialized_variables: ignore
 linter:
   rules:
-    - avoid_private_typedef_functions
-    - await_only_futures
-    - cancel_subscriptions
-    - close_sinks
-    - unawaited_futures
-    - avoid_init_to_null
+    prefer_if_elements_to_conditional_expressions: false
+    overridden_fields: false
+    type_annotate_public_apis: false

example/geocodes/geocodes.dart

@@ -6,32 +6,30 @@ import 'dart:html';
 import 'package:react/react.dart' as react;
 import 'package:react/react_dom.dart' as react_dom;
 
-/**
- * Hello,
- *
- * This is the Dart portion of the tutorial for the Dart react package.
- *
- * We'll go through a simple app that queries the Google Maps API and shows the result to the user.
- * It also stores the search history and allows the user to reload past queries.
- *
- * In this file you'll find the structure and the logic of the app. There is also a `geocodes.html` file which contains
- * the mount point.
- *
- * Be sure that you understand the basic concepts of [React](http://facebook.github.io/react/) before reading this
- * tutorial.
- *
- * Enjoy!
- */
+/// Hello,
+///
+/// This is the Dart portion of the tutorial for the Dart react package.
+///
+/// We'll go through a simple app that queries the Google Maps API and shows the result to the user.
+/// It also stores the search history and allows the user to reload past queries.
+///
+/// In this file you'll find the structure and the logic of the app. There is also a `geocodes.html` file which contains
+/// the mount point.
+///
+/// Be sure that you understand the basic concepts of [React](https://reactjs.org/) before reading this
+/// tutorial.
+///
+/// Enjoy!
 
 /// Divide your app into components and conquer!
 ///
-/// This is the first custom [Component].
+/// This is the first custom `Component`.
 ///
 /// It is just an HTML `<tr>` element displaying a single API response to the user.
 class _GeocodesResultItem extends react.Component {
   /// The only function you must implement in the custom component is [render].
   ///
-  /// Every [Component] has a map of properties called [Component.props]. It can be specified during creation.
+  /// Every `Component` has a map of properties called `props`. It can be specified during creation.
   @override
   render() {
     return react.tr({}, [
@@ -42,13 +40,13 @@ class _GeocodesResultItem extends react.Component {
   }
 }
 
-/// Now we need to tell ReactJS that our custom [Component] exists by calling [registerComponent].
+/// Now we need to tell ReactJS that our custom `Component` exists by calling `registerComponent`.
 ///
 /// As a reward, it gives us a function, that takes the properties and returns our element. You'll see it in action
 /// shortly.
 ///
-/// This is the only correct way to create a [Component]. Do not use the constructor!
-var geocodesResultItem = react.registerComponent(() => new _GeocodesResultItem());
+/// This is the only correct way to create a `Component`. Do not use the constructor!
+var geocodesResultItem = react.registerComponent(() => _GeocodesResultItem());
 
 /// In this component we'll build an HTML `<table>` element full of the `<tr>` elements generated by
 /// [_GeocodesResultItem]
@@ -95,13 +93,13 @@ class _GeocodesResultList extends react.Component {
   }
 }
 
-var geocodesResultList = react.registerComponent(() => new _GeocodesResultList());
+var geocodesResultList = react.registerComponent(() => _GeocodesResultList());
 
-/// In this [Component] we'll build a search form.
+/// In this `Component` we'll build a search form.
 ///
-/// This [Component] illustrates that:
+/// This `Component` illustrates that:
 ///
-/// > The functions can be [Component] parameters _(handy for callbacks)_
+/// > The functions can be `Component` parameters _(handy for callbacks)_
 ///
 /// > The DOM [Element]s can be accessed using `ref`s.
 class _GeocodesForm extends react.Component {
@@ -158,16 +156,16 @@ class _GeocodesForm extends react.Component {
   /// Handle form submission via `props.onSubmit`
   onFormSubmit(react.SyntheticEvent event) {
     event.preventDefault();
-    InputElement inputElement = react_dom.findDOMNode(searchInputInstance);
+    final inputElement = react_dom.findDOMNode(searchInputInstance);
     // The input's value is accessed.
-    var address = inputElement.value;
+    final address = inputElement.value;
     inputElement.value = '';
     // Call the callback from the parent element is called.
     props['submitter'](address);
   }
 }
 
-var geocodesForm = react.registerComponent(() => new _GeocodesForm());
+var geocodesForm = react.registerComponent(() => _GeocodesForm());
 
 /// Renders an HTML `<li>` to be used as a child within the [_GeocodesHistoryList].
 class _GeocodesHistoryItem extends react.Component {
@@ -189,7 +187,7 @@ class _GeocodesHistoryItem extends react.Component {
   }
 }
 
-var geocodesHistoryItem = react.registerComponent(() => new _GeocodesHistoryItem());
+var geocodesHistoryItem = react.registerComponent(() => _GeocodesHistoryItem());
 
 /// Renders the "history list"
 ///
@@ -203,7 +201,7 @@ class _GeocodesHistoryList extends react.Component {
         {
           'key': 'list',
         },
-        new List.from(props['data'].keys.map((key) => geocodesHistoryItem({
+        List.from((props['data'] as Map).keys.map((key) => geocodesHistoryItem({
               'key': key,
               'query': props['data'][key]['query'],
               'status': props['data'][key]['status'],
@@ -214,11 +212,11 @@ class _GeocodesHistoryList extends react.Component {
   }
 }
 
-var geocodesHistoryList = react.registerComponent(() => new _GeocodesHistoryList());
+var geocodesHistoryList = react.registerComponent(() => _GeocodesHistoryList());
 
-/// The root [Component] of our application.
+/// The root `Component` of our application.
 ///
-/// Introduces [state]. Both [state] and [props] are valid locations to store [Component] data.
+/// Introduces [state]. Both [state] and [props] are valid locations to store `Component` data.
 ///
 /// However, there are some key differences to note:
 ///
@@ -228,7 +226,7 @@ var geocodesHistoryList = react.registerComponent(() => new _GeocodesHistoryList
 ///
 /// > When [state] is changed, the component will re-render.
 ///
-/// It's a common practice to store the application data in the [state] of the root [Component]. It will re-render
+/// It's a common practice to store the application data in the [state] of the root `Component`. It will re-render
 /// every time the state is changed. However, it is not required - you can also use normal variables and re-render
 /// manually if you wish.
 ///
@@ -247,23 +245,23 @@ class _GeocodesApp extends react.Component {
   /// Sends the [addressQuery] to the API and processes the result
   newQuery(String addressQuery) async {
     // Once the query is being sent, it appears in the history and is given an id.
-    var id = addQueryToHistory(addressQuery);
+    final id = addQueryToHistory(addressQuery);
 
     // Prepare the URL
     addressQuery = Uri.encodeQueryComponent(addressQuery);
-    var path = 'https://maps.googleapis.com/maps/api/geocode/json?address=$addressQuery';
+    final path = 'https://maps.googleapis.com/maps/api/geocode/json?address=$addressQuery';
 
     try {
       // Send the request
-      var raw = await HttpRequest.getString(path);
+      final raw = await HttpRequest.getString(path);
       // Delay the answer 2 more seconds, for test purposes
-      await new Future.delayed(new Duration(seconds: 2));
+      await Future.delayed(Duration(seconds: 2));
       // Is this the answer to the last request?
       if (id == last_id) {
         // If yes, query was `OK` and `shown_addresses` are replaced
         state['history'][id]['status'] = 'OK';
 
-        var data = json.decode(raw);
+        final data = json.decode(raw);
 
         // Calling `setState` will update the state and then repaint the component.
         //
@@ -291,7 +289,7 @@ class _GeocodesApp extends react.Component {
 
   /// Add a new [addressQuery] to the `state.history` Map with its status set to 'pending', then return its `id`.
   addQueryToHistory(String addressQuery) {
-    var id = ++last_id;
+    final id = ++last_id;
 
     state['history'][id] = {'query': addressQuery, 'status': 'pending'};
 
@@ -324,7 +322,7 @@ class _GeocodesApp extends react.Component {
   }
 }
 
-var geocodesApp = react.registerComponent(() => new _GeocodesApp());
+var geocodesApp = react.registerComponent(() => _GeocodesApp());
 
 /// And finally, a few magic commands to wire it all up!
 ///

example/geocodes/geocodes.html

@@ -12,7 +12,7 @@
      * In this file you'll find the mount point of the app. There is also a `geocodes.dart` file which contains the
      * structure and the application logic.
      *
-     * Be sure that you understand the basic concepts of [React](http://facebook.github.io/react/) before reading this
+     * Be sure that you understand the basic concepts of [React](https://reactjs.org/) before reading this
      * tutorial.
      *
      * Enjoy!

example/js_components/js_components.dart

@@ -10,33 +10,35 @@ import 'package:react/react_client/react_interop.dart';
 import 'package:react/react_dom.dart' as react_dom;
 
 main() {
-  var content = IndexComponent({});
+  final content = IndexComponent({});
 
   react_dom.render(content, querySelector('#content'));
 }
 
-var IndexComponent = react.registerComponent2(() => new _IndexComponent());
+var IndexComponent = react.registerComponent2(() => _IndexComponent());
 
 class _IndexComponent extends react.Component2 {
   SimpleCustomComponent simpleRef;
 
+  @override
   get initialState => {
         'open': false,
       };
 
   handleClose(_) {
-    this.setState({
+    setState({
       'open': false,
     });
   }
 
   handleClick(_) {
-    this.setState({
+    setState({
       'open': true,
     });
     print(simpleRef.getFoo());
   }
 
+  @override
   render() {
     return MuiThemeProvider(
       {
@@ -45,7 +47,7 @@ class _IndexComponent extends react.Component2 {
       SimpleCustom({
         'foo': 'Foo Prop from dart... IN A JAVASCRIPT COMPONENT!',
         'ref': (ref) {
-          simpleRef = ref;
+          simpleRef = ref as SimpleCustomComponent;
         }
       }),
       CssBaseline({}),
@@ -62,21 +64,21 @@ class _IndexComponent extends react.Component2 {
           DialogActions(
             {},
             Button({
-              'color': "primary",
+              'color': 'primary',
               'onClick': handleClose,
             }, 'OK'),
           )),
       Typography({
-        'variant': "h4",
+        'variant': 'h4',
         'gutterBottom': true,
       }, 'Material-UI'),
       Typography({
-        'variant': "subtitle1",
+        'variant': 'subtitle1',
         'gutterBottom': true,
       }, 'example project'),
       Button({
-        'variant': "contained",
-        'color': "secondary",
+        'variant': 'contained',
+        'color': 'secondary',
         'onClick': handleClick,
       }, Icon({}, 'fingerprint'), 'Super Secret Password'),
     );
@@ -98,7 +100,7 @@ external ReactClass get _SimpleCustomComponent;
 ///
 /// This converts the Dart props [Map] passed into it in the
 /// the same way props are converted for DOM components.
-final SimpleCustom = new ReactJsComponentFactoryProxy(_SimpleCustomComponent);
+final SimpleCustom = ReactJsComponentFactoryProxy(_SimpleCustomComponent);
 
 /// JS interop wrapper class for the component,
 /// allowing us to interact with component instances
@@ -131,13 +133,13 @@ class MaterialUI {
 external Map get theme;
 
 // All the Material UI components converted to dart Components
-final Button = new ReactJsComponentFactoryProxy(MaterialUI.Button);
-final CssBaseline = new ReactJsComponentFactoryProxy(MaterialUI.CssBaseline);
-final Dialog = new ReactJsComponentFactoryProxy(MaterialUI.Dialog);
-final DialogActions = new ReactJsComponentFactoryProxy(MaterialUI.DialogActions);
-final DialogContent = new ReactJsComponentFactoryProxy(MaterialUI.DialogContent);
-final DialogContentText = new ReactJsComponentFactoryProxy(MaterialUI.DialogContentText);
-final DialogTitle = new ReactJsComponentFactoryProxy(MaterialUI.DialogTitle);
-final Icon = new ReactJsComponentFactoryProxy(MaterialUI.Icon);
-final MuiThemeProvider = new ReactJsComponentFactoryProxy(MaterialUI.MuiThemeProvider);
-final Typography = new ReactJsComponentFactoryProxy(MaterialUI.Typography);
+final Button = ReactJsComponentFactoryProxy(MaterialUI.Button);
+final CssBaseline = ReactJsComponentFactoryProxy(MaterialUI.CssBaseline);
+final Dialog = ReactJsComponentFactoryProxy(MaterialUI.Dialog);
+final DialogActions = ReactJsComponentFactoryProxy(MaterialUI.DialogActions);
+final DialogContent = ReactJsComponentFactoryProxy(MaterialUI.DialogContent);
+final DialogContentText = ReactJsComponentFactoryProxy(MaterialUI.DialogContentText);
+final DialogTitle = ReactJsComponentFactoryProxy(MaterialUI.DialogTitle);
+final Icon = ReactJsComponentFactoryProxy(MaterialUI.Icon);
+final MuiThemeProvider = ReactJsComponentFactoryProxy(MaterialUI.MuiThemeProvider);
+final Typography = ReactJsComponentFactoryProxy(MaterialUI.Typography);

example/suspense/suspense.dart

@@ -18,7 +18,8 @@ external ReactClass jsLazy(Promise Function() factory);
 // Only intended for testing purposes, Please do not copy/paste this into repo.
 // This will most likely be added to the PUBLIC api in the future,
 // but needs more testing and Typing decisions to be made first.
-ReactJsComponentFactoryProxy lazy(Future<ReactComponentFactoryProxy> factory()) => ReactJsComponentFactoryProxy(
+ReactJsComponentFactoryProxy lazy(Future<ReactComponentFactoryProxy> Function() factory) =>
+    ReactJsComponentFactoryProxy(
       jsLazy(
         allowInterop(
           () => futureToPromise(
@@ -32,7 +33,7 @@ ReactJsComponentFactoryProxy lazy(Future<ReactComponentFactoryProxy> factory())
     );
 
 main() {
-  var content = wrapper({});
+  final content = wrapper({});
 
   react_dom.render(content, querySelector('#content'));
 }

example/test/call_and_nosuchmethod_test.dart

@@ -1,16 +1,17 @@
 // ignore_for_file: deprecated_member_use_from_same_package
-import "dart:html";
+import 'dart:html';
 
-import "package:react/react_dom.dart" as react_dom;
-import "package:react/react.dart" as react;
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:react/react.dart' as react;
 
 class _CustomComponent extends react.Component {
+  @override
   render() {
     return react.div({}, props['children']);
   }
 }
 
-var customComponent = react.registerComponent(() => new _CustomComponent());
+var customComponent = react.registerComponent(() => _CustomComponent());
 
 void main() {
   react_dom.render(