[web] Support custom location strategies

Author: mdebbar

lib/web_ui/lib/src/engine.dart

@@ -26,7 +26,6 @@ part 'engine/alarm_clock.dart';
 part 'engine/assets.dart';
 part 'engine/bitmap_canvas.dart';
 part 'engine/browser_detection.dart';
-part 'engine/browser_location.dart';
 part 'engine/canvaskit/canvas.dart';
 part 'engine/canvaskit/canvaskit_canvas.dart';
 part 'engine/canvaskit/canvaskit_api.dart';
@@ -63,7 +62,9 @@ part 'engine/dom_canvas.dart';
 part 'engine/dom_renderer.dart';
 part 'engine/engine_canvas.dart';
 part 'engine/frame_reference.dart';
-part 'engine/history.dart';
+part 'engine/history/history.dart';
+part 'engine/history/js_url_strategy.dart';
+part 'engine/history/url_strategy.dart';
 part 'engine/html/backdrop_filter.dart';
 part 'engine/html/canvas.dart';
 part 'engine/html/clip.dart';

lib/web_ui/lib/src/engine/history.dart renamed to lib/web_ui/lib/src/engine/history/history.dart

@@ -25,29 +25,29 @@ abstract class BrowserHistory {
   late ui.VoidCallback _unsubscribe;
 
   /// The strategy to interact with html browser history.
-  LocationStrategy? get locationStrategy => _locationStrategy;
-  LocationStrategy? _locationStrategy;
+  JsUrlStrategy? get urlStrategy => _urlStrategy;
+  JsUrlStrategy? _urlStrategy;
   /// Updates the strategy.
   ///
   /// This method will also remove any previous modifications to the html
   /// browser history and start anew.
-  Future<void> setLocationStrategy(LocationStrategy? strategy) async {
-    if (strategy != _locationStrategy) {
-      await _tearoffStrategy(_locationStrategy);
-      _locationStrategy = strategy;
-      await _setupStrategy(_locationStrategy);
+  Future<void> setUrlStrategy(JsUrlStrategy? strategy) async {
+    if (strategy != _urlStrategy) {
+      await _tearoffStrategy(_urlStrategy);
+      _urlStrategy = strategy;
+      await _setupStrategy(_urlStrategy);
     }
   }
 
-  Future<void> _setupStrategy(LocationStrategy? strategy) async {
+  Future<void> _setupStrategy(JsUrlStrategy? strategy) async {
     if (strategy == null) {
       return;
     }
     _unsubscribe = strategy.onPopState(onPopState as dynamic Function(html.Event));
     await setup();
   }
 
-  Future<void> _tearoffStrategy(LocationStrategy? strategy) async {
+  Future<void> _tearoffStrategy(JsUrlStrategy? strategy) async {
     if (strategy == null) {
       return;
     }
@@ -58,28 +58,28 @@ abstract class BrowserHistory {
 
   /// Exit this application and return to the previous page.
   Future<void> exit() async {
-    if (_locationStrategy != null) {
-      await _tearoffStrategy(_locationStrategy);
+    if (_urlStrategy != null) {
+      await _tearoffStrategy(_urlStrategy);
       // Now the history should be in the original state, back one more time to
       // exit the application.
-      await _locationStrategy!.back();
-      _locationStrategy = null;
+      await _urlStrategy!.go(-1);
+      _urlStrategy = null;
     }
   }
 
   /// This method does the same thing as the browser back button.
   Future<void> back() {
-    if (locationStrategy != null) {
-      return locationStrategy!.back();
+    if (_urlStrategy != null) {
+      return _urlStrategy!.go(-1);
     }
     return Future<void>.value();
   }
 
   /// The path of the current location of the user's browser.
-  String get currentPath => locationStrategy?.path ?? '/';
+  String get currentPath => urlStrategy?.getPath() ?? '/';
 
   /// The state of the current location of the user's browser.
-  dynamic get currentState => locationStrategy?.state;
+  dynamic get currentState => urlStrategy?.getState();
 
   /// Update the url with the given [routeName] and [state].
   void setRouteName(String? routeName, {dynamic? state});
@@ -137,10 +137,10 @@ class MultiEntriesBrowserHistory extends BrowserHistory {
 
   @override
   void setRouteName(String? routeName, {dynamic? state}) {
-    if (locationStrategy != null) {
+    if (urlStrategy != null) {
       assert(routeName != null);
       _lastSeenSerialCount += 1;
-      locationStrategy!.pushState(
+      urlStrategy!.pushState(
         _tagWithSerialCount(state, _lastSeenSerialCount),
         'flutter',
         routeName!,
@@ -150,13 +150,13 @@ class MultiEntriesBrowserHistory extends BrowserHistory {
 
   @override
   void onPopState(covariant html.PopStateEvent event) {
-    assert(locationStrategy != null);
+    assert(urlStrategy != null);
     // May be a result of direct url access while the flutter application is
     // already running.
     if (!_hasSerialCount(event.state)) {
       // In this case we assume this will be the next history entry from the
       // last seen entry.
-      locationStrategy!.replaceState(
+      urlStrategy!.replaceState(
         _tagWithSerialCount(event.state, _lastSeenSerialCount + 1),
         'flutter',
         currentPath);
@@ -179,7 +179,7 @@ class MultiEntriesBrowserHistory extends BrowserHistory {
   @override
   Future<void> setup() {
     if (!_hasSerialCount(currentState)) {
-      locationStrategy!.replaceState(
+      urlStrategy!.replaceState(
         _tagWithSerialCount(currentState, 0),
         'flutter',
         currentPath
@@ -196,11 +196,11 @@ class MultiEntriesBrowserHistory extends BrowserHistory {
     assert(_hasSerialCount(currentState));
     int backCount = _currentSerialCount;
     if (backCount > 0) {
-      await locationStrategy!.back(count: backCount);
+      await urlStrategy!.go(-backCount);
     }
     // Unwrap state.
     assert(_hasSerialCount(currentState) && _currentSerialCount == 0);
-    locationStrategy!.replaceState(
+    urlStrategy!.replaceState(
       currentState['state'],
       'flutter',
       currentPath,
@@ -254,16 +254,16 @@ class SingleEntryBrowserHistory extends BrowserHistory {
 
   @override
   void setRouteName(String? routeName, {dynamic? state}) {
-    if (locationStrategy != null) {
-      _setupFlutterEntry(locationStrategy!, replace: true, path: routeName);
+    if (urlStrategy != null) {
+      _setupFlutterEntry(urlStrategy!, replace: true, path: routeName);
     }
   }
 
   String? _userProvidedRouteName;
   @override
   void onPopState(covariant html.PopStateEvent event) {
     if (_isOriginEntry(event.state)) {
-      _setupFlutterEntry(_locationStrategy!);
+      _setupFlutterEntry(_urlStrategy!);
 
       // 2. Send a 'popRoute' platform message so the app can handle it accordingly.
       if (window._onPlatformMessage != null) {
@@ -305,22 +305,22 @@ class SingleEntryBrowserHistory extends BrowserHistory {
       // 2. Then we remove the new entry.
       // This will take us back to our "flutter" entry and it causes a new
       // popstate event that will be handled in the "else if" section above.
-      _locationStrategy!.back();
+      _urlStrategy!.go(-1);
     }
   }
 
   /// This method should be called when the Origin Entry is active. It just
   /// replaces the state of the entry so that we can recognize it later using
   /// [_isOriginEntry] inside [_popStateListener].
-  void _setupOriginEntry(LocationStrategy strategy) {
+  void _setupOriginEntry(JsUrlStrategy strategy) {
     assert(strategy != null); // ignore: unnecessary_null_comparison
     strategy.replaceState(_wrapOriginState(currentState), 'origin', '');
   }
 
   /// This method is used manipulate the Flutter Entry which is always the
   /// active entry while the Flutter app is running.
   void _setupFlutterEntry(
-    LocationStrategy strategy, {
+    JsUrlStrategy strategy, {
     bool replace = false,
     String? path,
   }) {
@@ -342,19 +342,19 @@ class SingleEntryBrowserHistory extends BrowserHistory {
       // the "origin" and "flutter" entries, we can safely assume they are
       // already setup.
     } else {
-      _setupOriginEntry(locationStrategy!);
-      _setupFlutterEntry(locationStrategy!, replace: false, path: path);
+      _setupOriginEntry(urlStrategy!);
+      _setupFlutterEntry(urlStrategy!, replace: false, path: path);
     }
     return Future<void>.value();
   }
 
   @override
   Future<void> tearDown() async {
-    if (locationStrategy != null) {
+    if (urlStrategy != null) {
       // We need to remove the flutter entry that we pushed in setup.
-      await locationStrategy!.back();
+      await urlStrategy!.go(-1);
       // Restores original state.
-      locationStrategy!.replaceState(_unwrapOriginState(currentState), 'flutter', currentPath);
+      urlStrategy!.replaceState(_unwrapOriginState(currentState), 'flutter', currentPath);
     }
   }
 }

lib/web_ui/lib/src/engine/history/js_url_strategy.dart

@@ -0,0 +1,84 @@
+// 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.
+
+// @dart = 2.10
+part of engine;
+
+typedef _PathGetter = String Function();
+
+typedef _StateGetter = dynamic Function();
+
+typedef _OnPopState = ui.VoidCallback Function(html.EventListener);
+
+typedef _StringToString = String Function(String);
+
+typedef _StateOperation = void Function(
+    dynamic state, String title, String url);
+
+typedef _HistoryMove = Future<void> Function(int count);
+
+/// Given a Dart implementation of URL strategy, it converts it to a JavaScript
+/// URL strategy that be passed through JS interop.
+JsUrlStrategy? convertToJsUrlStrategy(UrlStrategy? strategy) {
+  if (strategy == null) {
+    return null;
+  }
+
+  return JsUrlStrategy(
+    getPath: allowInterop(strategy.getPath),
+    getState: allowInterop(strategy.getState),
+    onPopState: allowInterop(strategy.onPopState),
+    prepareExternalUrl: allowInterop(strategy.prepareExternalUrl),
+    pushState: allowInterop(strategy.pushState),
+    replaceState: allowInterop(strategy.replaceState),
+    go: allowInterop(strategy.go),
+    // getBaseHref: allowInterop(strategy.getBaseHref),
+  );
+}
+
+/// The JavaScript representation of a URL strategy.
+///
+/// This is used to pass URL strategy implementations across a JS-interop
+/// bridge.
+@JS()
+@anonymous
+abstract class JsUrlStrategy {
+  /// Creates an instance of [JsUrlStrategy] from a bag of URL strategy
+  /// functions.
+  external factory JsUrlStrategy({
+    @required _PathGetter getPath,
+    @required _StateGetter getState,
+    @required _OnPopState onPopState,
+    @required _StringToString prepareExternalUrl,
+    @required _StateOperation pushState,
+    @required _StateOperation replaceState,
+    @required _HistoryMove go,
+  });
+
+  /// Subscribes to popstate events and returns a function that could be used to
+  /// unsubscribe from popstate events.
+  external ui.VoidCallback onPopState(html.EventListener fn);
+
+  /// Returns the active path in the browser.
+  external String getPath();
+
+  /// Returns the history state in the browser.
+  external dynamic getState();
+
+  /// Given a path that's internal to the app, create the external url that
+  /// will be used in the browser.
+  external String prepareExternalUrl(String internalUrl);
+
+  /// Push a new history entry.
+  external void pushState(dynamic state, String title, String url);
+
+  /// Replace the currently active history entry.
+  external void replaceState(dynamic state, String title, String url);
+
+  /// Moves forwards or backwards through the history stack.
+  external Future<void> go(int count);
+
+  // TODO: add this:
+  // external String getBaseHref();
+}