support flutter web wasm builds

[lukepighetti]

Version

4.5.0

Steps to Reproduce

in a flutter web project, build it with flutter build web --wasm

Expected Result

it builds

Actual Result

it doesn't build

More Context

flutter web wasm builds are now in stable branch and it is now a reasonable expectation for packages to support it https://docs.flutter.dev/platform-integration/web/wasm

[marandaneto]

Thanks for creating the issue.

We'd need to:

Migrate your packages to package:web and dart:js_interop to make them compatible with Wasm. Read the Requires JS-interop section to learn more.

mainly the posthog_flutter_web.dart and posthog_flutter_web_handler.dart files would need to be changed.
Something to check is if after the migration it's still compatible with older Flutter versions (that's a must I'd say otherwise we'd need a major bump).

While we'd like to support it, it's still a low priority since there are a few limitations to running wasm on the browser so we'd not do this right now but soonish, of course PRs are welcome, happy to guide anyway lending a hand here.

[flowhorn]

I tried a little PR, currently I have issues with flutter 3.24 so I couldn't test it again when filing the PR, but this should work using dart:js_interop instead of dart:js.

Feel free to use this PR/adjust it etc.

#114

[marandaneto]

I tried a little PR, currently I have issues with flutter 3.24 so I couldn't test it again when filing the PR, but this should work using dart:js_interop instead of dart:js.

Feel free to use this PR/adjust it etc.

#114

a few things have to be fixed such as:

call.arguments['properties'] as Map<Object?, Object?>? ?? {} so the extension jsify is recognized.
For some reason the cast has to be always to Map<Object?, Object?> even though its declared as Map<String, Object>? properties, the method channel is always converting during the invokeMethod call, plus test that everything works as expected, but thanks for the initial PR @flowhorn

[IchordeDionysos]

@marandaneto we are evaluating different product analytics solutions. From a technical perspective PostHog is definitely a standout with how well you support the different ecosystems and frameworks!

The only place I can think of where you are now behind is WASM support :P
amplitude/Amplitude-Flutter#197

Why is WASM important to us?

We as simpleclub, are one of the biggest online education platform in Germany, selling to large German corporations.
We run a heavy web application with complex interactive 2D and soon 3D animations. Those animations help our customers better understand the connection between concepts and aid their learning journey.

Being able to run our Flutter web app via WASM drastically reduces the resource consumptions, making our app more accessible to customers with lower end devices.

Our customers use Edge in their day-to-day usage, which does support WASM-GC.
Flutter dynamically switches to use WASM on supported browsers and falls back to CanvasKit (non-WASM) in Firefox/Safari. For users on supported browsers this would be a massive improvement, while we wait for Firefox to fix a performance bug and the new Safari version (with support for WASM-GC) to come out of the technical preview.

[marandaneto]

@IchordeDionysos #114 (comment)
let's see if the contributor would finish up the PR or if somebody else would like to take over, There's probably not much left to finish it up.

[EmadHedayati]

Hey guys, thanks for the efforts! Where are we on this? Currently it's stopping us from building web with --WASM and it's very important for our platform.

[marandaneto]

Hey guys, thanks for the efforts! Where are we on this? Currently it's stopping us from building web with --WASM and it's very important for our platform.

sadly not high prior, but happy to guide/review if you'd like to contribute.

[EmadHedayati]

@marandaneto Thanks for the quick reply. Sry I'm not that familiar with native codes and channels. All I know is that the migration from dart:js to package:web is supposed to be very simple and straight forward. You can access the js object like this:

@JS('analytics')
external JSAny? get analytics;

From there, you just need to convert the object types using this link.
Sry if that's not much help. Did you manage to get it working? @flowhorn

[marandaneto]

@EmadHedayati this issue has more context (comments) on what/where things must be changed and what was left in that PR.
Wasm isn't super popular yet, so it's not a priority, but as I mentioned, I'm glad to help with reviewing/guiding.