how to compile .js for the web?

[Ansh-Rathod]

Hello! Thank you for the awesome plugin. I'm having a little difficulty while compiling the js file to use worker on the web. would it be possible to have your guidance on the issue?

this is my original file

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:squadron/squadron.dart';
import 'package:squadron/squadron_annotations.dart';

import 'work.activator.g.dart';

part 'work.worker.g.dart';

@SquadronService(pool: false)
class Work {
  Offset oldOff = Offset.zero;
  @SquadronMethod()
  Future<void> updateElements(Offset n) async {
    oldOff = n;
  }
}

i genrated code with squadron_builder package and got the work.web.g.dart file

now when i run the work.web.g.dart to js compile it throws errros

                                                            ^^^^^^^^^^^^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:681:23:
Error: The method 'clampDouble' isn't defined for the class 'HorizontalDragGestureRecognizer'.
 - 'HorizontalDragGestureRecognizer' is from 'package:flutter/src/gestures/monodrag.dart' ('../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart').
    final double dx = clampDouble(estimate.pixelsPerSecond.dx, -maxVelocity, maxVelocity);
                      ^^^^^^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:683:43:
Error: The method 'Offset' isn't defined for the class 'HorizontalDragGestureRecognizer'.
 - 'HorizontalDragGestureRecognizer' is from 'package:flutter/src/gestures/monodrag.dart' ('../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart').
      velocity: Velocity(pixelsPerSecond: Offset(dx, 0)),
                                          ^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:689:45:
Error: 'PointerDeviceKind' isn't a type.
  bool _hasSufficientGlobalDistanceToAccept(PointerDeviceKind pointerDeviceKind, double? deviceTouchSlop) {
                                            ^^^^^^^^^^^^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:694:30:
Error: 'Offset' isn't a type.
  Offset _getDeltaForDetails(Offset delta) => Offset(delta.dx, 0.0);
                             ^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:694:47:
Error: The method 'Offset' isn't defined for the class 'HorizontalDragGestureRecognizer'.
 - 'HorizontalDragGestureRecognizer' is from 'package:flutter/src/gestures/monodrag.dart' ('../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart').
  Offset _getDeltaForDetails(Offset delta) => Offset(delta.dx, 0.0);
                                              ^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:697:37:
Error: 'Offset' isn't a type.
  double _getPrimaryValueFromOffset(Offset value) => value.dx;
                                    ^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:721:50:
Error: 'PointerDeviceKind' isn't a type.
  bool isFlingGesture(VelocityEstimate estimate, PointerDeviceKind kind) {
                                                 ^^^^^^^^^^^^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:729:61:
Error: 'PointerDeviceKind' isn't a type.
  DragEndDetails? _considerFling(VelocityEstimate estimate, PointerDeviceKind kind) {
                                                            ^^^^^^^^^^^^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:739:45:
Error: 'PointerDeviceKind' isn't a type.
  bool _hasSufficientGlobalDistanceToAccept(PointerDeviceKind pointerDeviceKind, double? deviceTouchSlop) {
                                            ^^^^^^^^^^^^^^^^^
../../../flutter/packages/flutter/lib/src/gestures/monodrag.dart:744:30:
Error: 'Offset' isn't a type.
  Offset _getDeltaForDetails(Offset delta) => delta;
                             ^^^^^^

...............

..............

i have to import Offset class anyways

[d-markey]

Hello,

Offset is part of dart:ui provided by Flutter. I believe the first few lines of your compilation error log should indicate that:

Error: Dart library 'dart:ui' is not available on this platform.

Web workers run on Dart, not Flutter, so you can't use Offset. Generally speaking, you can't work with UI in workers.

[Ansh-Rathod]

@d-markey thank you for answering! i removed dart:ui library now but now im facing one other problem,

Error: [-2,"UnimplementedError: structured clone of other type","dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:3  throw_\ndart-sdk/lib/html/html_common/conversions.dart 153:5                         walk\ndart-sdk/lib/html/html_common/conversions.dart 162:17                        copyList\ndart-sdk/lib/html/html_common/conversions.dart 136:14                        walk\ndart-sdk/lib/html/html_common/conversions.dart 162:17                        copyList\ndart-sdk/lib/html/html_common/conversions.dart 136:14                        walk\ndart-sdk/lib/html/html_common/conversions.dart 168:16                        convertDartToNative_PrepareForStructuredClone\ndart-sdk/lib/html/html_common/conversions_dart2js.dart 94:10                 convertDartToNative_PrepareForStructuredClone\ndart-sdk/lib/html/html_common/conversions.dart 32:10                         convertDartToNative_SerializedScriptValue\ndart-sdk/lib/html/dart2js/html_dart2js.dart 21665:23                         postMessage]\npackages/squadron/src/_impl/browser/_channel.dart 41:7                       [_postRequest]\npackages/squadron/src/_impl/xplat/_value_wrapper.dart 75:17                  compute\npackages/squadron/src/_impl/browser/_channel.dart 119:19                     sendRequest\npackages/squadron/src/worker/worker.dart 134:19                              [_send]\npackages/squadron/src/worker/worker.dart 113:40                              <fn>\ndart-sdk/lib/async/zone.dart 1661:54                                         runUnary\ndart-sdk/lib/async/future_impl.dart 162:18                                   handleValue\ndart-sdk/lib/async/future_impl.dart 846:44                                   handleValueCallback\ndart-sdk/lib/async/future_impl.dart 875:13                                   _propagateToListeners\ndart-sdk/lib/async/future_impl.dart 647:5                                    [_completeWithValue]\ndart-sdk/lib/async/future_impl.dart 721:7       

[d-markey]

I suppose you replaced Flutter's Offset with a class of your own: but the memory model of Isolates/Web Workers require that data passed to/from workers be cloned. This is handled automatically in Dart VM but not in Web, where this aspect is handled by the browser. Problem is, JavaScript knows nothing about Dart objects and types. Only base types such as ints, strings, bools as well as lists and maps can cross Web Worker boundaries.

Depending on your use case, you could replace your class with a map or a list holding the offset's data and call it a day.

If you want a custom class, you will have to implement a marshaler to serialize/deserialize data as it transits from your main app to the worker. Squadron provides the base class SquadronMarshaler that you can use to implement your de/serialization code. You will find examples here: https://github.com/d-markey/squadron_sample/tree/main/lib/src/json/marshalers. Make sure the serialization process only uses base types.

[Ansh-Rathod]

Thank you very much sir for your guidance. the plugin is very helpful for me and I'll try out the marsel thing.

[d-markey]

You're welcome, closing this issue as resolved!