Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[web:multi-view] Devise a public API for multi-view #137377

Closed
yjbanov opened this issue Oct 26, 2023 · 2 comments · Fixed by flutter/engine#48106
Closed

[web:multi-view] Devise a public API for multi-view #137377

yjbanov opened this issue Oct 26, 2023 · 2 comments · Fixed by flutter/engine#48106
Assignees
@ditman
Labels
P1 High-priority issues at the top of the work list platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team

Comments

@yjbanov
Copy link
Contributor

yjbanov commented Oct 26, 2023

Devise a public API for embedding FlutterViews into arbitrary number of elements.

Goals

  • Platform-specific API exposed through dart:ui_web, flutter.js, or both.
  • Supports all CRUD operations.

Non-goals

  • Cross-platform API is out of scope. The desired API is web-specific that deals with DOM elements directly, and provides easy integration path with the host page written in any language, particularly JavaScript.
@yjbanov yjbanov added platform-web Web applications specifically P1 High-priority issues at the top of the work list team-web Owned by Web platform team triaged-web Triaged by Web platform team labels Oct 26, 2023
@yjbanov yjbanov mentioned this issue Oct 27, 2023
Closed
@ditman
Copy link
Member

ditman commented Oct 27, 2023

WIP here: https://docs.google.com/document/d/17FrGclUcIpthNEVbz60ZrZhYv8IElESOYclpW9zixcI/edit?resourcekey=0-3sYyBJD_BItOSwSm9pndqg

@ditman ditman mentioned this issue Nov 11, 2023
Merged
8 tasks
auto-submit bot pushed a commit to flutter/engine that referenced this issue Nov 15, 2023
@ditman
[web] JSConfig: Add multiViewEnabled value. (#47939)
bc5bbd3 
This change:

* Adds a boolean to `multiViewEnabled`.
* Removes unused `canvasKitMaximumSurfaces` value.

Part of: flutter/flutter#137377

[C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
@ditman ditman mentioned this issue Nov 21, 2023
Merged
8 tasks
auto-submit bot pushed a commit to flutter/engine that referenced this issue Nov 21, 2023
@ditman
[web] Add add/removeView JS methods. (#48106)
7cdfc51 
This PR adds:

* JS-interop types to expose addView/removeView from the running FlutterApp object on JavaScript.
  * Also, the options object that can be passed to `addView`.

### Issues:

* Fixes: flutter/flutter#137377

### Info

Most interesting files:

* `app_bootstrap.dart` -> Adds the implementation for JS add/remove view.
* `js_app.dart` -> Adds the js-interop layer for the FlutterApp object, and the configuration type. (Two options: `hostElement` and `initialData`).
* `flutter_view_manager.dart` -> An abstraction over the `viewData` map that keeps related things together: viewData, js configuration options, register/unregister methods and a Stream<void> of modification events.

The rest of the changes were ""required"" to have a small demo that does anything (currently it lets me "register" views from javascript). I didn't add much in there, because probably it's already being worked on by @mdebbar; just fiddled with the constructor of the EngineFlutterView to create views from JS Config, and added a wrapper around the `viewData` map (`FlutterViewManager`) to prevent direct access to the Map.

## Usage

This is how I'm currently initializing my Flutter App, so I can "leak" the `flutterApp` to window and do things asynchronously after flutter loads:

```html
<script>
  window.addEventListener('load', async function(ev) {
    _flutter.loader.loadEntrypoint({
      onEntrypointLoaded: function(engineInitializer) {
        engineInitializer.initializeEngine({
          multiViewEnabled: true,
        }).then(function(appRunner) {
          return appRunner.runApp();
        }).then(onAppRunning);
      }
    });
    // Leak flutterApp to window so we can do async things...
    function onAppRunning(flutterApp) {
      console.log('Running app', flutterApp);
      window.flutterApp = flutterApp;
    }
  });
</script>
```

This to test:

 * Go on your JS console and use `flutterApp.addView({})` and see how that returns a Promise for the viewId it just added,
 * Now do `flutterApp.removeView(0)` (removes the implicitView), and see how everything starts crashing! (as expected) 
   * Get out of this weird state with a hot reload �

[C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 5, 2023

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@ditman ditman

Labels
P1 High-priority issues at the top of the work list platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[web] Add add/removeView JS methods. ditman/flutter-engine
2 participants
@yjbanov @ditman