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/.gitignore

@@ -0,0 +1,44 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release

web_embedding/ng-flutter/flutter/.metadata

@@ -0,0 +1,45 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled.
+
+version:
+  revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+  channel: master
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: android
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: ios
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: linux
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: macos
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: web
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: windows
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

web_embedding/ng-flutter/flutter/README.md

@@ -0,0 +1,16 @@
+# ng_companion
+
+A new Flutter project.
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+
+For help getting started with Flutter development, view the
+[online documentation](https://docs.flutter.dev/), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.

web_embedding/ng-flutter/flutter/analysis_options.yaml

@@ -0,0 +1,29 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at
+  # https://dart-lang.github.io/linter/lints/index.html.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

web_embedding/ng-flutter/flutter/lib/main.dart

@@ -0,0 +1,73 @@
+// ignore_for_file: avoid_web_libraries_in_flutter
+
+import 'package:flutter/material.dart';
+
+import 'pages/counter.dart';
+import 'pages/dash.dart';
+import 'pages/text.dart';
+
+import 'src/js_interop.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatefulWidget {
+  const MyApp({super.key});
+
+  @override
+  State<MyApp> createState() => _MyAppState();
+}
+
+class _MyAppState extends State<MyApp> {
+  final ValueNotifier<DemoScreen> _screen = ValueNotifier<DemoScreen>(DemoScreen.counter);
+  final ValueNotifier<int> _counter = ValueNotifier<int>(0);
+  final ValueNotifier<String> _text = ValueNotifier<String>('');
+
+  late final DemoAppStateManager _state;
+
+  @override
+  void initState() {
+    super.initState();
+    _state = DemoAppStateManager(
+      screen: _screen,
+      counter: _counter,
+      text: _text,
+    );
+    final export = createDartExport(_state);
+
+    // Emit this through the root object of the flutter app :)
+    broadcastAppEvent('flutter-initialized', export);
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Element embedding',
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
+        useMaterial3: true,
+      ),
+      home: ValueListenableBuilder<DemoScreen>(
+        valueListenable: _screen,
+        builder: (context, value, child) => demoScreenRouter(value),
+      ),
+    );
+  }
+
+  Widget demoScreenRouter(DemoScreen which) {
+    switch (which) {
+      case DemoScreen.counter:
+        return CounterDemo(counter: _counter);
+      case DemoScreen.text:
+        return TextFieldDemo(text: _text);
+      case DemoScreen.dash:
+        return DashDemo(text: _text);
+    }
+  }
+}

web_embedding/ng-flutter/flutter/lib/pages/counter.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+class CounterDemo extends StatefulWidget {
+  final ValueNotifier<int> counter;
+
+  const CounterDemo({
+    super.key,
+    required this.counter,
+  });
+
+  @override
+  State<CounterDemo> createState() => _CounterDemoState();
+}
+
+class _CounterDemoState extends State<CounterDemo> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: const Text('Counter'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            const Text(
+              'You have pushed the button this many times:',
+            ),
+            ValueListenableBuilder(
+              valueListenable: widget.counter, 
+              builder: (context, value, child) => Text(
+                '$value',
+                style: Theme.of(context).textTheme.headlineMedium,
+              ),
+            ),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: () { widget.counter.value++; },
+        tooltip: 'Increment',
+        child: const Icon(Icons.add),
+      ),
+    );
+  }
+}

web_embedding/ng-flutter/flutter/lib/pages/dash.dart

@@ -0,0 +1,150 @@
+import 'package:flutter/material.dart';
+
+class DashDemo extends StatefulWidget {
+  final ValueNotifier<String> text;
+
+  const DashDemo({super.key, required this.text});
+
+  @override
+  State<DashDemo> createState() => _DashDemoState();
+}
+
+class _DashDemoState extends State<DashDemo> {
+  final double textFieldHeight = 80;
+  final Color colorPrimary = Colors.blue.shade700;
+  late TextEditingController textController;
+
+  int totalCharCount = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    // Initial value of the text box
+    totalCharCount = widget.text.value.length;
+    textController = TextEditingController.fromValue(
+      TextEditingValue(
+        text: widget.text.value,
+        selection: TextSelection.collapsed(offset: widget.text.value.length)
+      )
+    );
+    // Report changes
+    textController.addListener(_onTextControllerChange);
+    // Listen to changes from the outside
+    widget.text.addListener(_onTextStateChanged);
+  }
+
+  void _onTextControllerChange() {
+    widget.text.value = textController.text;
+    setState(() {
+      totalCharCount = textController.text.length;
+    });
+  }
+
+  void _onTextStateChanged() {
+    textController.value = TextEditingValue(
+      text: widget.text.value,
+      selection: TextSelection.collapsed(offset: widget.text.value.length),
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    textController.dispose();
+    widget.text.removeListener(_onTextStateChanged);
+  }
+
+  void _handleClear() {
+    textController.value = TextEditingValue(
+      text: '',
+      selection: TextSelection.collapsed(offset: widget.text.value.length),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: [
+          Expanded(
+            child: Container(
+              width: double.infinity,
+              color: colorPrimary,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    'COUNT WITH DASH!',
+                    style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                      color: Colors.white,
+                    ),
+                  ),
+                  // Bordered dash avatar
+                  Padding(
+                    padding: const EdgeInsets.all(12),
+                    child: ClipOval(
+                      child: Container(
+                        color: Colors.white,
+                        padding: const EdgeInsets.all(2),
+                        child: ClipOval(
+                          child: Container(
+                            color: colorPrimary,
+                            padding: const EdgeInsets.all(2),
+                            child: const CircleAvatar(
+                              radius: 45,
+                              backgroundColor: Colors.white,
+                              foregroundImage: AssetImage('assets/dash.png'),
+                            )
+                          ),
+                        )
+                      ),
+                    ),
+                  ),
+                  Text(
+                    '$totalCharCount',
+                    style: Theme.of(context).textTheme.displayLarge!.copyWith(
+                      color: Colors.white,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(12),
+            child: Row(
+              children: [
+                Expanded(
+                  child: TextField(
+                    autofocus: true,
+                    controller: textController,
+                    maxLines: 1,
+                    decoration: const InputDecoration(
+                      border: OutlineInputBorder(),
+                      hintText: 'Type something!',
+                    ),
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 12),
+                  child: Ink(
+                    decoration: ShapeDecoration(
+                      color: colorPrimary,
+                      shape: const CircleBorder(),
+                    ),
+                    child: IconButton(
+                      icon: const Icon(Icons.refresh),
+                      color: Colors.white,
+                      onPressed: _handleClear,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

web_embedding/ng-flutter/flutter/lib/pages/text.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+class TextFieldDemo extends StatefulWidget {
+  const TextFieldDemo({super.key, required this.text});
+  final ValueNotifier<String> text;
+
+  @override
+  State<TextFieldDemo> createState() => _TextFieldDemoState();
+}
+
+class _TextFieldDemoState extends State<TextFieldDemo> {
+  late TextEditingController textController;
+
+  @override
+  void initState() {
+    super.initState();
+    // Initial value of the text box
+    textController = TextEditingController.fromValue(
+      TextEditingValue(
+        text: widget.text.value,
+        selection: TextSelection.collapsed(offset: widget.text.value.length)
+      )
+    );
+    // Report changes
+    textController.addListener(_onTextControllerChange);
+    // Listen to changes from the outside
+    widget.text.addListener(_onTextStateChanged);
+  }
+
+  void _onTextControllerChange() {
+    widget.text.value = textController.text;
+  }
+
+  void _onTextStateChanged() {
+    textController.value = TextEditingValue(
+      text: widget.text.value,
+      selection: TextSelection.collapsed(offset: widget.text.value.length),
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    textController.dispose();
+    widget.text.removeListener(_onTextStateChanged);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: const Text('Text Field'),
+      ),
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(14.0),
+          child: TextField(
+            controller: textController,
+            maxLines: null,
+            decoration: const InputDecoration(
+              border: OutlineInputBorder(),
+              hintText: 'Type something!',
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

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);
+}

web_embedding/ng-flutter/flutter/pubspec.yaml

@@ -0,0 +1,23 @@
+name: ng_companion
+description: A flutter app with a counter that can be manipulated from JS.
+publish_to: 'none'
+version: 1.0.0
+
+environment:
+  sdk: '>=3.0.0-322.0.dev <4.0.0'
+
+dependencies:
+  cupertino_icons: ^1.0.2
+  flutter:
+    sdk: flutter
+  js: ^0.6.7
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^2.0.0
+
+flutter:
+  uses-material-design: true
+  assets:
+    - assets/

web_embedding/ng-flutter/flutter/web/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="ng_companion">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>ng_companion</title>
+  <link rel="manifest" href="manifest.json">
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    var serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
+</head>
+<body>
+  <script>
+    // Listen until Flutter tells us it's ready to rumble
+    window.addEventListener('flutter-initialized', function (event) {
+      const state = event.detail;
+      window['_debugCounter'] = state;
+      state.onClicksChanged(() => {
+        console.log('New clicks value: ', state.getClicks());
+      });
+    });
+    window.addEventListener('load', function(ev) {
+      // Download main.dart.js
+      _flutter.loader.loadEntrypoint({
+        serviceWorker: {
+          serviceWorkerVersion: serviceWorkerVersion,
+        },
+        onEntrypointLoaded: async function(engineInitializer) {
+          await engineInitializer.autoStart();
+        }
+      });
+    });
+  </script>
+</body>
+</html>

web_embedding/ng-flutter/flutter/web/manifest.json

@@ -0,0 +1,35 @@
+{
+    "name": "ng_companion",
+    "short_name": "ng_companion",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}