[gis_web] renderButton now accepts any js-interop target.

Author: ditman

packages/google_identity_services_web/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.2.0+1
+
+* Relaxes the `renderButton` API so any JS-Interop Object can be its `target`.
+
 ## 0.2.0
 
 * Adds `renderButton` API to `id.dart`.

packages/google_identity_services_web/example/integration_test/js_interop_id_test.dart

@@ -9,6 +9,7 @@ import 'package:google_identity_services_web/id.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:js/js.dart';
 
+import 'src/dom.dart';
 import 'utils.dart' as utils;
 
 void main() async {
@@ -19,6 +20,17 @@ void main() async {
     await utils.installGisMock();
   });
 
+  group('renderButton', () {
+    testWidgets('supports a js-interop target from any library', (_) async {
+      final DomElement target = createDomElement('div');
+
+      id.renderButton(target);
+
+      final DomElement? button = target.querySelector('button');
+      expect(button, isNotNull);
+    });
+  });
+
   group('prompt', () {
     testWidgets('supports a moment notification callback', (_) async {
       id.initialize(IdConfiguration(client_id: 'testing_1-2-3'));

packages/google_identity_services_web/example/integration_test/src/dom.dart

@@ -0,0 +1,30 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// ignore_for_file: public_member_api_docs
+
+import 'package:js/js.dart';
+import 'package:js/js_util.dart' as js_util;
+
+@JS()
+@staticInterop
+class DomDocument {}
+extension DomDocumentExtension on DomDocument {
+  DomElement createElement(String name, [Object? options]) =>
+      js_util.callMethod(this, 'createElement',
+          <Object>[name, if (options != null) options]) as DomElement;
+}
+
+@JS()
+@staticInterop
+class DomElement {}
+
+extension DomElementExtension on DomElement {
+  external DomElement? querySelector(String selector);
+}
+
+@JS('document')
+external DomDocument get domDocument;
+
+DomElement createDomElement(String tag) => domDocument.createElement(tag);

packages/google_identity_services_web/example/web/mock-gis.js

@@ -33,6 +33,13 @@ class Id {
   initialize(config) {
     this.config = config;
   }
+  renderButton(target, config) {
+    // Simulate rendering a button.
+    target.replaceChildren();
+    target.dataset.buttonConfig = config;
+    let button = document.createElement('button');
+    target.append(button);
+  }
   prompt(momentListener) {
     callAsync(() => {
       if (this.mockCredentialResponse) {

packages/google_identity_services_web/lib/src/js_interop/google_accounts_id.dart

@@ -14,7 +14,6 @@ library google_accounts_id;
 
 import 'package:js/js.dart';
 
-import 'dom.dart';
 import 'shared.dart';
 
 /// Binding to the `google.accounts.id` JS global.
@@ -93,7 +92,7 @@ extension GoogleAccountsIdExtension on GoogleAccountsId {
   /// Method: google.accounts.id.renderButton
   /// https://developers.google.com/identity/gsi/web/reference/js-reference#google.accounts.id.renderButton
   external void renderButton(
-    DomHtmlElement parent, [
+    Object parent, [
     GsiButtonConfiguration options,
   ]);
 

packages/google_identity_services_web/pubspec.yaml

@@ -2,7 +2,7 @@ name: google_identity_services_web
 description: A Dart JS-interop layer for Google Identity Services. Google's new sign-in SDK for Web that supports multiple types of credentials.
 repository: https://github.com/flutter/packages/tree/main/packages/google_identity_services_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+google_identiy_services_web%22
-version: 0.2.0
+version: 0.2.0+1
 
 environment:
   sdk: ">=2.17.0 <3.0.0"