Migrate js interop fixes #297 (#306)

Co-authored-by: Saddam Sinatrya <[email protected]>
fluttercandies · Dec 4, 2024 · 7f05c9b · 7f05c9b
1 parent 78f98ad
commit 7f05c9b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 61 deletions.
diff --git a/packages/flutter_image_compress_web/lib/src/log.dart b/packages/flutter_image_compress_web/lib/src/log.dart
@@ -1,9 +1,10 @@
-@JS('console')
 library log;
 
-import 'package:js/js.dart';
+import 'dart:developer' as dev;
+import 'dart:js_interop';
 
-external void log(dynamic tag, dynamic msg);
+@JS('console.log')
+external void log(JSAny? tag, JSAny? msg);
 
 bool showLog = false;
 
@@ -15,7 +16,6 @@ void jsLog(dynamic tag, dynamic msg) {
 
 void dartLog(Object? msg) {
   if (showLog) {
-    // ignore: avoid_print
-    print(msg.toString());
+    dev.log(msg.toString());
   }
 }
diff --git a/packages/flutter_image_compress_web/lib/src/pica.dart b/packages/flutter_image_compress_web/lib/src/pica.dart
@@ -1,34 +1,21 @@
-@JS()
 library pica;
 
 import 'dart:convert';
-import 'dart:html';
+import 'dart:js_interop';
 import 'dart:typed_data';
 
 import 'package:flutter_image_compress_platform_interface/flutter_image_compress_platform_interface.dart';
-import 'package:js/js.dart';
-import 'package:js/js_util.dart';
+import 'package:web/web.dart';
 
-import 'window.dart';
 import 'log.dart' as logger;
+import 'util.dart';
+import 'window.dart';
 
-@JS('pica.resize')
-external dynamic resize(
-  ImageBitmap imageBitmap,
-  CanvasElement canvas,
-);
-
-@JS()
-@staticInterop
-class Pica {}
-
-extension PicaExt on Pica {
-  external dynamic resize(
-    ImageBitmap imageBitmap,
-    CanvasElement canvas,
+extension type Pica._(JSObject _) implements JSObject {
+  external JSPromise resize(
+    ImageBitmap from,
+    HTMLCanvasElement to,
   );
-
-  external dynamic init();
 }
 
 Future<Uint8List> resizeWithList({
@@ -39,14 +26,14 @@ Future<Uint8List> resizeWithList({
   int quality = 88,
 }) async {
   final Stopwatch stopwatch = Stopwatch()..start();
-  final pica = jsWindow.pica() as Pica;
+  final pica = window.pica();
   logger.jsLog('The pica instance', pica);
   logger.jsLog('src image buffer', buffer);
   logger.dartLog('src image buffer length: ${buffer.length}');
-  final bitmap = await convertUint8ListToBitmap(buffer);
+  final bitmap = await buffer.toImageBitmap();
 
-  final srcWidth = bitmap.width!;
-  final srcHeight = bitmap.height!;
+  final srcWidth = bitmap.width;
+  final srcHeight = bitmap.height;
 
   final ratio = srcWidth / srcHeight;
 
@@ -55,8 +42,10 @@ Future<Uint8List> resizeWithList({
 
   logger.jsLog('target size', '$width x $height');
 
-  final canvas = CanvasElement(width: width, height: height);
-  await promiseToFuture(pica.resize(bitmap, canvas));
+  final canvas = HTMLCanvasElement();
+  canvas.width = width;
+  canvas.height = height;
+  await pica.resize(bitmap, canvas).toDart;
   final blob = canvas.toDataUrl(format.type, quality / 100);
   final str = blob.split(',')[1];
 

diff --git a/packages/flutter_image_compress_web/lib/src/util.dart b/packages/flutter_image_compress_web/lib/src/util.dart
@@ -0,0 +1,15 @@
+library util;
+
+import 'dart:js_interop';
+import 'dart:typed_data';
+
+import 'package:web/web.dart';
+
+extension Uint8ListExtension on Uint8List {
+  Future<ImageBitmap> toImageBitmap() async {
+    final buffer = this;
+    final blob = Blob([buffer.toJS].toJS);
+    final bitmap = await window.createImageBitmap(blob).toDart;
+    return bitmap;
+  }
+}
diff --git a/packages/flutter_image_compress_web/lib/src/window.dart b/packages/flutter_image_compress_web/lib/src/window.dart
@@ -1,31 +1,8 @@
-@JS()
 library window;
 
-import 'dart:html';
-import 'dart:typed_data';
+import 'package:web/web.dart';
+import 'pica.dart';
 
-import 'package:js/js.dart';
-import 'package:js/js_util.dart';
-
-@JS()
-@staticInterop
-class JSWindow {}
-
-extension JSWindowExtension on JSWindow {
-  external Function get createImageBitmap;
-  external Function get pica;
-}
-
-Future<ImageBitmap> convertUint8ListToBitmap(Uint8List buffer) async {
-  final blob = Blob([buffer]);
-
-  final result = await jsWindow.createImageBitmap(blob);
-  final bitmap = await promiseToFuture(result);
-  return bitmap;
-}
-
-JSWindow get jsWindow => window as JSWindow;
-
-extension FutureDynamicExtension on dynamic {
-  Future<T> toFuture<T>() => promiseToFuture(this);
+extension WindowExtension on Window {
+  external Pica pica();
 }
diff --git a/packages/flutter_image_compress_web/pubspec.yaml b/packages/flutter_image_compress_web/pubspec.yaml
@@ -4,7 +4,7 @@ version: 0.1.4+1
 repository: https://github.com/fluttercandies/flutter_image_compress
 
 environment:
-  sdk: '>=2.16.0 <4.0.0'
+  sdk: '>=3.3.0 <4.0.0'
   flutter: ">=2.5.0"
 
 dependencies:
@@ -14,7 +14,7 @@ dependencies:
     sdk: flutter
 
   flutter_image_compress_platform_interface: ^1.0.5
-  js: '>=0.6.0 <0.8.0'
+  web: ^0.5.1
 
 dev_dependencies:
   flutter_test: