DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Jhin Lee
Jhin Lee

Posted on • Updated on

Interesting Dart Syntax: mixin application class

Recently I just got to know this dart syntax. You can define a class with a mixin like this:

class Foo = Bar with Baz;
Enter fullscreen mode Exit fullscreen mode

Without the syntax, you would probably do this:

class Foo extends Bar with Baz {
  Foo(): super();
}
Enter fullscreen mode Exit fullscreen mode

Currently, there is an issue in DDC with the syntax, so probably better not to use it for the flutter web project yet:

Error with private variable setters in mixins on dart web. #50119

dart --version 2.19.0-266.0.dev, also on stable / beta channels web / chrome

Very similar issue to https://github.com/dart-lang/sdk/issues/44636.

Simplest reproduction so far: Edit: See @schultek's minimum sample below for a simpler reproduction.

  • dart create -t web-simple call_stack_overflow && cd call_stack_overflow
  • Replace main with the following
import 'dart:html';
import 'package:riverpod/riverpod.dart';

void main() {
  final container = ProviderContainer();
  final value = container.read(stringValue.state);
  querySelector('#output')?.text = 'Your ${value.state} app is running.';
}

final stringValue = StateProvider.autoDispose((ref) => 'Hello world');
Enter fullscreen mode Exit fullscreen mode
  • Add Riverpod to pubspec with riverpod: ^2.0.0
  • Run sample with webdev serve
  • Visit web app and check the console.

Stack overflow on private setter in a mixin. Making the field in the package public shifts the error to another private member.

 .......
    at set [_keepAliveLinks] (auto_dispose.dart:42:7)
    at set [_keepAliveLinks] (auto_dispose.dart:42:7)
    at set [_keepAliveLinks] (auto_dispose.dart:42:7)
    at AutoDisposeProviderElementMixin.<computed> (auto_dispose.dart:6:24)
    at StateProviderElement_AutoDisposeProviderElementMixin$36.__ (base.dart:81:48)
    at new AutoDisposeStateProviderElement.__ (auto_dispose.dart:42:7)
    at AutoDisposeStateProvider.new.createElement (auto_dispose.dart:31:44)
    at [_create] (container.dart:49:32)
    at framework._StateReader.new.getElement (container.dart:41:52)
    at container.dart:434:37
    at framework.ProviderContainer.new.readProviderElement (container.dart:466:14)
    at ProviderElementProxy.new.read (proxy_provider_listenable.dart:112:25)
    at framework.ProviderContainer.new.read (container.dart:257:20)
    at main$ (main.dart:25:26)
    at main.dart.bootstrap.js:273:10
    at Array.forEach (<anonymous>)
    at window.$dartRunMain (main.dart.bootstrap.js:272:32)
    at <anonymous>:1:8
    at Object.runMain (client.js:8777:21)

Originally reported here: https://github.com/rrousselGit/riverpod/issues/1713

I tried creating a more minimal sample, but was unsuccessful.

But I pretty much like the syntax that makes the code cleaner.

Top comments (0)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another β€œCoder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.