Dart JS Interop

JS Interop Features

context.callMethod('myFunction', [arg1, arg2]);

var jsObject = context['myObject'];
jsObject['property'] = 'value';

var jsObj = JsObject.jsify({
  'name': 'John',
  'age': 30
});

var callback = allowInterop((data) {
  print('Callback: $data');
});

🔹 Basic JS Interop

Start with simple JavaScript interactions:

import 'dart:js';

void main() {
  // Access global JavaScript context
  var window = context;
  
  // Call JavaScript alert
  context.callMethod('alert', ['Hello from Dart!']);
  
  // Access JavaScript console
  context['console'].callMethod('log', ['Dart says hello!']);
  
  // Get browser information
  var navigator = context['navigator'];
  var userAgent = navigator['userAgent'];
  print('Browser: $userAgent');
  
  // Set a global JavaScript variable
  context['dartMessage'] = 'This was set by Dart!';
}

🔹 Working with JS Objects

Create and manipulate JavaScript objects:

import 'dart:js';

void main() {
  // Create a JavaScript object from Dart Map
  var person = JsObject.jsify({
    'name': 'Alice',
    'age': 25,
    'city': 'New York',
    'greet': allowInterop(() => 'Hello from Alice!')
  });
  
  // Access object properties
  print(person['name']); // Alice
  
  // Modify properties
  person['age'] = 26;
  
  // Call object method
  var greeting = person.callMethod('greet', []);
  print(greeting); // Hello from Alice!
  
  // Convert JS object back to Dart
  var dartMap = {
    'name': person['name'],
    'age': person['age'],
    'city': person['city']
  };
  print(dartMap);
}

🔹 Using JavaScript Libraries

Integrate popular JavaScript libraries like jQuery:

import 'dart:js';

void main() {
  // Check if jQuery is available
  if (context.hasProperty('jQuery')) {
    var jquery = context['jQuery'];
    
    // Use jQuery to manipulate DOM
    jquery.callMethod(r'$', ['#myButton']).callMethod('click', [
      allowInterop((event) {
        print('Button clicked via jQuery!');
        
        // Change button text
        jquery.callMethod(r'$', ['#myButton'])
            .callMethod('text', ['Clicked!']);
      })
    ]);
    
    // Add CSS class
    jquery.callMethod(r'$', ['.my-class'])
        .callMethod('addClass', ['highlight']);
    
    // Animate element
    jquery.callMethod(r'$', ['#animated-div'])
        .callMethod('fadeIn', [1000]);
  } else {
    print('jQuery not found!');
  }
}

🔹 Handling Promises

Work with JavaScript Promises and async operations:

import 'dart:js';
import 'dart:js_util';

void main() async {
  // Call a JavaScript function that returns a Promise
  var jsPromise = context.callMethod('fetch', ['/api/data']);
  
  try {
    // Convert JS Promise to Dart Future
    var response = await promiseToFuture(jsPromise);
    
    // Work with the response
    var textPromise = response.callMethod('text', []);
    var text = await promiseToFuture(textPromise);
    
    print('Response: $text');
  } catch (error) {
    print('Error: $error');
  }
  
  // Create a Dart Future and convert to JS Promise
  Future<String> dartFuture = Future.delayed(
    Duration(seconds: 2), 
    () => 'Hello from Dart Future!'
  );
  
  var jsPromiseFromDart = futureToPromise(dartFuture);
  context['myPromise'] = jsPromiseFromDart;
}