How to compile worker for flutter web?

[bambinoua]

I need to generate pdf using pdf package with using squadron worker.

I created a class as described:

@SquadronService(baseUrl: './worers', targetPlatform: TargetPlatform.web)
base class BdfBuilderWorker {
  @SquadronMethod
  Future<Unit8List> build(PdfBuilder builder) {
    return builder.build();
  }
}

I run dart builder and got required g.dart files

I tried to compile to js

dart compile js "pdf_builder_worker.web.g.dart" -o "pdf_builder_worker.web.g.dart.js"

but compilation starts to analyze fonts, other classes etc.. so compilation is failed. Can you give me advise how to compily ONLY single file to JS? Or how can I got the js file in other way?

document_5350698071565049624.mp4

[bambinoua]

Btw, I tried to run the app without JS file generation. Should it work? Unfortunately I could not find the example how to use workers under web.

[d-markey]

Hello @bambinoua

The errors you see during compilation are symptomatic of a UI import (Flutter, DOM...). Web Workers cannot use anything UI: they don't have "window", "document"... see https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

I've used @kevmoo's pubviz tool to check dependencies for pdf and it seems it's safe to use in a Web worker. However if you're using pdf_widget_wrapper or printing (which relies on pdf_widget_wrapper) and importing any of them from your worker service, they could cause trouble because they're based on Flutter and dart:ui.

What are you using in your worker? I know it's annoying, but sometimes, even importing simple things like Rect, Color... will prevent compilation of your Worker to JS/WASM.

BTW your SquadronService annotation uses worers as the baseUrl. You probably mean workers.

[bambinoua]

Hi, @d-markey!
I wanted to use squadron for pdf save operation, i.e.

final document = Document(); // the document from `pdf` package
final pages = await getPages(); // fetches the collection of pdf `Page`s.
pages.forEach(document.addPage);
final bytes = await document.save(); // this operation is expensive I want to do it in a worker

This operation is a part of PdfPreview class:

PdfPreview(
  ...
  build: (_) => _pdfBuilder(), // aforementioned hard operation is executed here
  ...
)

I created such worker (I changed the first one):

@SquadronService(baseUrl: './workers', targetPlatform: TargetPlatform.web)
base class PdfSaveService {
  @squadronMethod
  Future<Uint8List> save(Document document) => document.save();
}

P.S. I need to some how execute that operation in a separate isolate but I am on web.

[d-markey]

Hello,

there's a pitfall when trying to use custom classes such as Document (from the PDF package) in Web Workers: they must pass the browser's internal boundaries (typically: Dart in main thread --> JS --> (transferred across worker boundaries by browser) --> JS --> Dart in worker thread).

Web Workers have their own memory space: instances that live in the main thread are not the same as the ones received by the Worker thread. And the browsers only knows about JS types: it doesn't know about Dart types. Squadron provides Marshalers for this.

So for this to work in a Web Worker:

@SquadronService(baseUrl: './workers', targetPlatform: TargetPlatform.web)
base class PdfSaveService {
  @squadronMethod
  Future<Uint8List> save(Document document) => document.save();
}

you'd need to implement a Squadron marshaler for Document (i.e. map the Document's state to pure JS data so it can be rebuilt on the other side). But I'm not sure this is feasible.

What you could do instead is offload the whole PDF creation process to the Web Worker:

@SquadronService(baseUrl: './workers', targetPlatform: TargetPlatform.web)
base class PdfSaveService {
  @squadronMethod
  Future<Uint8List> create(Map inputs) async {
    final document = Document(); // the document from `pdf` package
    final pages = await getPages(inputs); // fetches the collection of pdf `Page`s.
    pages.forEach(document.addPage);
    return await document.save();
  }
}