Publish web_embedding (#1777)

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md


Co-authored-by: Mark Thompson
<2554588+MarkTechson@users.noreply.github.com>
Co-authored-by: David Iglesias <ditman@gmail.com>

Co-authored-by: Mark Thompson <2554588+MarkTechson@users.noreply.github.com>
Co-authored-by: David Iglesias <ditman@gmail.com>

web_embedding/ng-flutter/flutter/lib/src/js_interop.dart

@@ -0,0 +1,8 @@
+
+/// Exposes useful functions to interop with JS from our Flutter app.
+library example_js_interop;
+
+export 'js_interop/counter_state_manager.dart';
+export 'js_interop/helper.dart' show broadcastAppEvent;
+
+export 'package:js/js_util.dart' show createDartExport;

web_embedding/ng-flutter/flutter/lib/src/js_interop/counter_state_manager.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/foundation.dart';
+import 'package:js/js.dart';
+
+enum DemoScreen {
+  counter('counter'),
+  text('text'),
+  dash('dash');
+
+  const DemoScreen(String screen) : _screen = screen;
+  final String _screen;
+
+  @override
+  String toString() => _screen;
+}
+
+/// This is the bit of state that JS is able to see.
+///
+/// It contains getters/setters/operations and a mechanism to
+/// subscribe to change notifications from an incoming [notifier].
+@JSExport()
+class DemoAppStateManager {
+  // Creates a DemoAppStateManager wrapping a ValueNotifier.
+  DemoAppStateManager({
+    required ValueNotifier<DemoScreen> screen,
+    required ValueNotifier<int> counter,
+    required ValueNotifier<String> text,
+  }) : _counter = counter, _text = text, _screen = screen;
+
+  final ValueNotifier<DemoScreen> _screen;
+  final ValueNotifier<int> _counter;
+  final ValueNotifier<String> _text;
+
+  // _counter
+  int getClicks() {
+    return _counter.value;
+  }
+  void setClicks(int value) {
+    _counter.value = value;
+  }
+  void incrementClicks() {
+    _counter.value++;
+  }
+  void decrementClicks() {
+    _counter.value--;
+  }
+
+  // _text
+  void setText(String text) {
+    _text.value = text;
+  }
+
+  String getText() {
+    return _text.value;
+  }
+
+  // _screen
+  void setScreen(String screen) {
+    _screen.value = DemoScreen.values.byName(screen);
+  }
+
+  String getScreen() {
+    return _screen.value.toString();
+  }
+
+  // Allows clients to subscribe to changes to the wrapped value.
+  void onClicksChanged(VoidCallback f) {
+    _counter.addListener(f);
+  }
+
+  void onTextChanged(VoidCallback f) {
+    _text.addListener(f);
+  }
+
+  void onScreenChanged(VoidCallback f) {
+    _screen.addListener(f);
+  }
+}

web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart

@@ -0,0 +1,55 @@
+import 'dart:js_interop';
+import 'package:js/js.dart';
+import 'package:js/js_util.dart' as js_util;
+
+/// This is a little bit of JS-interop code so this Flutter app can dispatch
+/// a custom JS event (to be deprecated by package:web)
+
+@JS('CustomEvent')
+@staticInterop
+class DomCustomEvent {
+  external factory DomCustomEvent.withType(JSString type);
+  external factory DomCustomEvent.withOptions(JSString type, JSAny options);
+  factory DomCustomEvent._(String type, [Object? options]) {
+    if (options != null) {
+      return DomCustomEvent.withOptions(type.toJS, js_util.jsify(options) as JSAny);
+    }
+    return DomCustomEvent.withType(type.toJS);
+  }
+}
+
+dispatchCustomEvent(DomElement target, String type, Object data) {
+  final DomCustomEvent event = DomCustomEvent._(type, <String, Object>{
+    'bubbles': true,
+    'composed': true,
+    'detail': data,
+  });
+
+  target.dispatchEvent(event);
+}
+
+@JS()
+@staticInterop
+class DomEventTarget {}
+extension DomEventTargetExtension on DomEventTarget {
+  @JS('dispatchEvent')
+  external JSBoolean _dispatchEvent(DomCustomEvent event);
+  bool dispatchEvent(DomCustomEvent event) => _dispatchEvent(event).toDart;
+}
+
+@JS()
+@staticInterop
+class DomElement extends DomEventTarget {}
+extension DomElementExtension on DomElement {
+  @JS('querySelector')
+  external DomElement? _querySelector(JSString selectors);
+  DomElement? querySelector(String selectors) => _querySelector(selectors.toJS);
+}
+
+@JS()
+@staticInterop
+class DomDocument extends DomElement {}
+
+@JS()
+@staticInterop
+external DomDocument get document;

web_embedding/ng-flutter/flutter/lib/src/js_interop/helper.dart

@@ -0,0 +1,10 @@
+import 'dom.dart' as dom;
+
+/// Locates the root of the flutter app (for now, the first element that has
+/// a flt-renderer tag), and dispatches a JS event named [name] with [data].
+void broadcastAppEvent(String name, Object data) {
+  final dom.DomElement? root = dom.document.querySelector('[flt-renderer]');
+  assert(root != null, 'Flutter root element cannot be found!');
+
+  dom.dispatchCustomEvent(root!, name, data);
+}