Mobx.dart: mobx_codegen generates invalid code when observable is of type Color

[sergeyv]

I'm trying to define a model which has attributes of type Color (dart.ui.Color):

import 'package:mobx/mobx.dart';
part "Label.g.dart";

class Label = LabelBase with _$Label;
abstract class LabelBase  implements Store {
  @observable 
  Color bgColor;
}

The generated code in Label.g.dart, however, uses dynamic:

final _$bgColorAtom = Atom(name: 'LabelBase.bgColor');

  @override
  dynamic get bgColor {
    _$bgColorAtom.reportObserved();
    return super.bgColor;
  }

  @override
  set bgColor(dynamic value) {
    _$bgColorAtom.context.checkIfStateModificationsAreAllowed(_$bgColorAtom);
    super.bgColor = value;
    _$bgColorAtom.reportChanged();
  }

which results in a compile-time error:

Error: The return type of the method '_$Label.bgColor' is 'dynamic', which does not match the return type, 'Color', of the overridden method, 'LabelBase.bgColor'.

• 'Color' is from 'dart:ui'.
  Change to a subtype of 'Color'.
  dynamic get bgColor {

Am I doing something wrong or is it a problem with mobx_codegen?

[pavanpodila]

I don't see an import for dart:ui. Is that present somewhere in the code ?

[pavanpodila]

This seems to be related to this issue with build_runner: https://github.com/dart-lang/json_serializable/issues/236

[pavanpodila]

After digging a bit deep, it looks like an issue with source_gen, where it is not able to discover the type correctly and thus marks it as dynamic. Will have to follow up with their team on this with a repro.

[rrousselGit]

This is a known issue. All code-generators suffer from the same limitation.

I made a temporary workaround on functional_widget by manually parsing the tokens. It's not perfect at all though.

[rrousselGit]

The problem is, code-generators do not use Dart from the Flutter SDK. They use Dart from the server SDK.

The one with dart:mirror but no dart:ui. So any type from dart:ui won't resolve.

[pavanpodila]

@rrousselGit Any suggestions how we should handle in mobx_codegen. We are relying on source_gen to give us the right type.

[rrousselGit]

I don't think there's a clean way to do it. The only solution is to wait and see. Libraries can't do anything.

You can try parsing tokens, but Mobx relies on decorators so that'll be a lot more complex to do. And even then it's not perfect

[pavanpodila]

The problem is, code-generators do not use Dart from the Flutter SDK. They use Dart from the server SDK.

The one with dart:mirror but no dart:ui. So any type from dart:ui won't resolve.

Oh boy! I don't see a clear path forward here 😢

[pavanpodila]

How about we wrap the dart:ui types with a custom type, which is from the same package? Not ideal but a workaround nonetheless.

class CustomColor extends Color;

OR

class CustomColor {
  Color color;
}

and then use it as below in Store:

@observable CustomColor color;

[rrousselGit]

That seems to work. It's probably a good workaround

[rrousselGit]

related: https://github.com/dart-lang/build/issues/733

[pavanpodila]

I just did a quick test with the following:

// Needs a constructor
class CustomColor extends Color {
  CustomColor(int value) : super(value);
}

It generates the output correctly now:

  final _$colorAtom = Atom(name: '_FormStore.color');

  @override
  CustomColor get color {
    _$colorAtom.reportObserved();
    return super.color;
  }

  @override
  set color(CustomColor value) {
    _$colorAtom.context.checkIfStateModificationsAreAllowed(_$colorAtom);
    super.color = value;
    _$colorAtom.reportChanged();
  }

I think with this workaround, we can close it.

[pavanpodila]

Thanks a lot @rrousselGit for pointing in the right direction and clarifying why this was failing!

[shyndman]

Hey there.

Just a head's up that MobX will now output dart:ui types. No more dynamic!

[pavanpodila]

All published now:

• mobx 0.3.7
• mobx_codegen 0.3.6

https://pub.dev/packages?q=mobx