feat: support hash router. (#572)

andycall · web-flow · commit a77b3820f45a · 2024-04-16T23:36:57.000+08:00
Support hash router and compatible with Vue-Router with
WebHashHistory().

1. click a `&lt;a&gt;` element with a path starts with '#' will trigger an
`hashupdate` event instead of refresh.
2. Add `hashchange` Event support.
diff --git a/bridge/CMakeLists.txt b/bridge/CMakeLists.txt
@@ -340,6 +340,7 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
     core/events/ui_event.cc
     core/events/focus_event.cc
     core/events/gesture_event.cc
+    core/events/hashchange_event.cc
     core/events/input_event.cc
     core/events/touch_event.cc
     core/events/mouse_event.cc
@@ -427,6 +428,8 @@ if ($ENV{WEBF_JS_ENGINE} MATCHES "quickjs")
     out/qjs_ui_event.cc
     out/qjs_ui_event_init.cc
     out/qjs_gesture_event.cc
+    out/qjs_hashchange_event.cc
+    out/qjs_hashchange_event_init.cc
     out/qjs_gesture_event_init.cc
     out/qjs_intersection_change_event.cc
     out/qjs_intersection_change_event_init.cc
diff --git a/bridge/bindings/qjs/binding_initializer.cc b/bridge/bindings/qjs/binding_initializer.cc
@@ -33,6 +33,7 @@
 #include "qjs_event_target.h"
 #include "qjs_focus_event.h"
 #include "qjs_gesture_event.h"
+#include "qjs_hashchange_event.h"
 #include "qjs_html_all_collection.h"
 #include "qjs_html_anchor_element.h"
 #include "qjs_html_body_element.h"
@@ -118,6 +119,7 @@ void InstallBindings(ExecutingContext* context) {
   QJSCloseEvent::Install(context);
   QJSFocusEvent::Install(context);
   QJSGestureEvent::Install(context);
+  QJSHashchangeEvent::Install(context);
   QJSInputEvent::Install(context);
   QJSCustomEvent::Install(context);
   QJSMouseEvent::Install(context);
diff --git a/bridge/bindings/qjs/wrapper_type_info.h b/bridge/bindings/qjs/wrapper_type_info.h
@@ -32,6 +32,7 @@ enum {
   JS_CLASS_ANIMATION_EVENT,
   JS_CLASS_FOCUS_EVENT,
   JS_CLASS_GESTURE_EVENT,
+  JS_CLASS_HASHCHANGE_EVENT,
   JS_CLASS_POP_STATE_EVENT,
   JS_CLASS_INTERSECTION_CHANGE_EVENT,
   JS_CLASS_KEYBOARD_EVENT,
diff --git a/bridge/core/dom/events/event.cc b/bridge/core/dom/events/event.cc
@@ -302,6 +302,10 @@ bool Event::IsPopstateEvent() const {
   return false;
 }
 
+bool Event::IsHashChangeEvent() const {
+  return false;
+}
+
 bool Event::IsIntersectionchangeEvent() const {
   return false;
 }
diff --git a/bridge/core/dom/events/event.h b/bridge/core/dom/events/event.h
@@ -171,6 +171,7 @@ class Event : public ScriptWrappable {
   virtual bool IsMessageEvent() const;
   virtual bool IsPopstateEvent() const;
   virtual bool IsIntersectionchangeEvent() const;
+  virtual bool IsHashChangeEvent() const;
 
   // Drag events are a subset of mouse events.
   virtual bool IsDragEvent() const;
diff --git a/bridge/core/events/dart_created_events.json5 b/bridge/core/events/dart_created_events.json5
@@ -37,6 +37,7 @@
         "gestureend"
       ]
     },
+    "hashchange",
     "input",
     {
       "class": "FocusEvent",
diff --git a/bridge/core/events/hashchange_event.cc b/bridge/core/events/hashchange_event.cc
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+#include "hashchange_event.h"
+#include "qjs_hashchange_event.h"
+
+namespace webf {
+
+HashchangeEvent* HashchangeEvent::Create(webf::ExecutingContext* context,
+                                         const webf::AtomicString& type,
+                                         webf::ExceptionState& exception_state) {
+  return MakeGarbageCollected<HashchangeEvent>(context, type, exception_state);
+}
+
+HashchangeEvent* HashchangeEvent::Create(webf::ExecutingContext* context,
+                                         const webf::AtomicString& type,
+                                         const std::shared_ptr<HashchangeEventInit>& initializer,
+                                         webf::ExceptionState& exception_state) {
+  return MakeGarbageCollected<HashchangeEvent>(context, type, initializer, exception_state);
+}
+
+HashchangeEvent::HashchangeEvent(webf::ExecutingContext* context,
+                                 const webf::AtomicString& type,
+                                 webf::ExceptionState& exception_state)
+    : Event(context, type) {}
+
+HashchangeEvent::HashchangeEvent(webf::ExecutingContext* context,
+                                 const webf::AtomicString& type,
+                                 const std::shared_ptr<HashchangeEventInit>& initializer,
+                                 webf::ExceptionState& exception_state)
+    : Event(context, type),
+      new_url_(initializer->hasNewURL() ? initializer->newURL() : AtomicString::Empty()),
+      old_url_(initializer->hasOldURL() ? initializer->oldURL() : AtomicString::Empty()) {}
+
+HashchangeEvent::HashchangeEvent(webf::ExecutingContext* context,
+                                 const webf::AtomicString& type,
+                                 webf::NativeHashchangeEvent* native_hash_change_event)
+    : Event(context, type, &native_hash_change_event->native_event),
+#if ANDROID_32_BIT
+      new_url_(AtomicString(ctx(),
+                            std::unique_ptr<AutoFreeNativeString>(
+                                reinterpret_cast<AutoFreeNativeString*>(native_hash_change_event->newURL)))),
+      old_url_(AtomicString(ctx(),
+                            std::unique_ptr<AutoFreeNativeString>(
+                                reinterpret_cast<AutoFreeNativeString*>(native_hash_change_event->oldURL))))
+#else
+      new_url_(AtomicString(ctx(),
+                            std::unique_ptr<AutoFreeNativeString>(
+                                reinterpret_cast<AutoFreeNativeString*>(native_hash_change_event->newURL)))),
+      old_url_(AtomicString(ctx(),
+                            std::unique_ptr<AutoFreeNativeString>(
+                                reinterpret_cast<AutoFreeNativeString*>(native_hash_change_event->oldURL))))
+#endif
+{
+}
+
+bool HashchangeEvent::IsHashChangeEvent() const {
+  return true;
+}
+
+const AtomicString& HashchangeEvent::newURL() const {
+  return new_url_;
+}
+
+const AtomicString& HashchangeEvent::oldURL() const {
+  return old_url_;
+}
+
+}  // namespace webf
diff --git a/bridge/core/events/hashchange_event.d.ts b/bridge/core/events/hashchange_event.d.ts
@@ -0,0 +1,10 @@
+import {Event} from "../dom/events/event";
+import {GestureEventInit} from "./gesture_event_init";
+import {HashchangeEventInit} from "./hashchange_event_init";
+
+interface HashchangeEvent extends Event {
+  readonly newURL: string;
+  readonly oldURL: string;
+  [key: string]: any;
+  new(type: string, init?: HashchangeEventInit): HashchangeEvent;
+}
diff --git a/bridge/core/events/hashchange_event.h b/bridge/core/events/hashchange_event.h
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+#ifndef WEBF_CORE_EVENTS_HASHCHANGE_EVENT_H_
+#define WEBF_CORE_EVENTS_HASHCHANGE_EVENT_H_
+
+#include "bindings/qjs/dictionary_base.h"
+#include "bindings/qjs/source_location.h"
+#include "core/dom/events/event.h"
+#include "qjs_hashchange_event_init.h"
+
+namespace webf {
+
+struct NativeHashchangeEvent;
+
+class HashchangeEvent : public Event {
+  DEFINE_WRAPPERTYPEINFO();
+
+ public:
+  using ImplType = HashchangeEvent*;
+
+  static HashchangeEvent* Create(ExecutingContext* context, const AtomicString& type, ExceptionState& exception_state);
+
+  static HashchangeEvent* Create(ExecutingContext* context,
+                                 const AtomicString& type,
+                                 const std::shared_ptr<HashchangeEventInit>& initializer,
+                                 ExceptionState& exception_state);
+
+  explicit HashchangeEvent(ExecutingContext* context, const AtomicString& type, ExceptionState& exception_state);
+
+  explicit HashchangeEvent(ExecutingContext* context,
+                           const AtomicString& type,
+                           const std::shared_ptr<HashchangeEventInit>& initializer,
+                           ExceptionState& exception_state);
+
+  explicit HashchangeEvent(ExecutingContext* context,
+                           const AtomicString& type,
+                           NativeHashchangeEvent* native_hash_change_event);
+
+  const AtomicString& newURL() const;
+  const AtomicString& oldURL() const;
+
+  bool IsHashChangeEvent() const override;
+
+ private:
+  AtomicString new_url_;
+  AtomicString old_url_;
+};
+
+}  // namespace webf
+
+#endif  // WEBF_CORE_EVENTS_HASHCHANGE_EVENT_H_
diff --git a/bridge/core/events/hashchange_event_init.d.ts b/bridge/core/events/hashchange_event_init.d.ts
@@ -0,0 +1,8 @@
+import { EventInit } from "../dom/events/event_init";
+
+// @ts-ignore
+@Dictionary()
+export interface HashchangeEventInit extends EventInit {
+    oldURL?: string;
+    newURL?: string;
+}
diff --git a/integration_tests/specs/navigator/history.ts b/integration_tests/specs/navigator/history.ts
@@ -64,4 +64,35 @@ describe('history API', () => {
       history.go(-1);
     });
   });
+
+  it('hashchange should fire when history back', (done) => {
+    expect(location.pathname).toBe('/public/core.build.js');
+    history.pushState({name: 2}, '', '#/page_1');
+    function onHashChange(e: HashChangeEvent) {
+      expect(new URL(e.oldURL).hash).toBe('#/page_1');
+      expect(new URL(e.newURL).hash).toBe('#hash=hashValue');
+      window.removeEventListener('hashchange', onHashChange);
+      done();
+    }
+    window.addEventListener('hashchange', onHashChange);
+    requestAnimationFrame(() => {
+      history.back();
+    });
+  });
+
+  it('hashchange when go back should work', (done) => {
+    expect(location.pathname).toBe('/public/core.build.js');
+    history.replaceState({name: 0}, '');
+    history.pushState({name: 2}, '', '#/page_1');
+    function onHashChange(e: HashChangeEvent) {
+      expect(new URL(e.oldURL).hash).toBe('#/page_1');
+      expect(new URL(e.newURL).hash).toBe('#hash=hashValue');
+      window.removeEventListener('popstate', onHashChange);
+      done();
+    }
+    window.addEventListener('hashchange', onHashChange);
+    requestAnimationFrame(() => {
+      history.go(-1);
+    });
+  });
 });
diff --git a/webf/lib/src/dom/event.dart b/webf/lib/src/dom/event.dart
@@ -48,6 +48,7 @@ const String EVENT_CAN_PLAY_THROUGH = 'canplaythrough';
 const String EVENT_ENDED = 'ended';
 const String EVENT_PAUSE = 'pause';
 const String EVENT_POP_STATE = 'popstate';
+const String EVENT_HASH_CHANGE = 'hashchange';
 const String EVENT_PLAY = 'play';
 const String EVENT_SEEKED = 'seeked';
 const String EVENT_SEEKING = 'seeking';
@@ -92,7 +93,7 @@ mixin ElementEventMixin on ElementBase {
         // Remove listener when no intersection related event
         renderBox.removeIntersectionChangeListener(handleIntersectionChange);
       }
-      if(_hasResizeObserverEvent()) {
+      if (_hasResizeObserverEvent()) {
         renderBox.addResizeListener(handleResizeChange);
       } else {
         renderBox.removeResizeListener(handleResizeChange);
@@ -264,6 +265,29 @@ class PopStateEvent extends Event {
   }
 }
 
+class HashChangeEvent extends Event {
+  final String newUrl;
+  final String oldUrl;
+
+  HashChangeEvent({required this.newUrl, required this.oldUrl}) : super(EVENT_HASH_CHANGE);
+
+  @override
+  Pointer<NativeType> toRaw([int extraLength = 0, bool isCustomEvent = false]) {
+    List<int> methods = [
+      stringToNativeString(newUrl).address,
+      stringToNativeString(oldUrl).address
+    ];
+
+    Pointer<RawEvent> rawEvent = super.toRaw(methods.length).cast<RawEvent>();
+    int currentStructSize = rawEvent.ref.length + methods.length;
+    Uint64List bytes = rawEvent.ref.bytes.asTypedList(currentStructSize);
+    bytes.setAll(rawEvent.ref.length, methods);
+    rawEvent.ref.length = currentStructSize;
+
+    return rawEvent;
+  }
+}
+
 class UIEvent extends Event {
   // Returns a long with details about the event, depending on the event type.
   // For click or dblclick events, UIEvent.detail is the current click count.
@@ -307,21 +331,20 @@ class UIEvent extends Event {
 class FocusEvent extends UIEvent {
   EventTarget? relatedTarget;
 
-  FocusEvent(String type, {
+  FocusEvent(
+    String type, {
     this.relatedTarget,
     super.detail,
     super.view,
     super.which,
     super.bubbles,
     super.cancelable,
     super.composed,
-  }): super(type);
+  }) : super(type);
 
   @override
   Pointer toRaw([int extraLength = 0, bool isCustomEvent = false]) {
-    List<int> methods = [
-      relatedTarget?.pointer?.address ?? nullptr.address
-    ];
+    List<int> methods = [relatedTarget?.pointer?.address ?? nullptr.address];
 
     Pointer<RawEvent> rawEvent = super.toRaw(methods.length + extraLength).cast<RawEvent>();
     int currentStructSize = rawEvent.ref.length + methods.length;
@@ -488,7 +511,9 @@ class DisappearEvent extends Event {
 
 class ResizeEvent extends Event {
   ResizeObserverEntry entry;
-  ResizeEvent(this.entry):super(EVENT_RESIZE);
+
+  ResizeEvent(this.entry) : super(EVENT_RESIZE);
+
   toCustomEvent() {
     return CustomEvent(EVENT_RESIZE, detail: entry.toJson());
   }
diff --git a/webf/lib/src/html/a.dart b/webf/lib/src/html/a.dart
@@ -19,8 +19,15 @@ class HTMLAnchorElement extends Element {
       String baseUrl = ownerDocument.controller.url;
       Uri baseUri = Uri.parse(baseUrl);
       Uri resolvedUri = ownerDocument.controller.uriParser!.resolve(baseUri, Uri.parse(href));
-      ownerDocument.controller.view
-          .handleNavigationAction(baseUrl, resolvedUri.toString(), _getNavigationType(resolvedUri.scheme));
+
+      if (href.trim().startsWith('#')) {
+        HistoryModule historyModule = ownerDocument.controller.module.moduleManager.getModule('History')!;
+        historyModule.pushState(null, url: href);
+        ownerView.window.dispatchEvent(HashChangeEvent(newUrl: resolvedUri.toString(), oldUrl: baseUrl));
+      } else {
+        ownerDocument.controller.view
+            .handleNavigationAction(baseUrl, resolvedUri.toString(), _getNavigationType(resolvedUri.scheme));
+      }
     }
   }
 
diff --git a/webf/lib/src/launcher/controller.dart b/webf/lib/src/launcher/controller.dart
@@ -687,9 +687,24 @@ class WebFViewController implements WidgetsBindingObserver {
       WebFNavigationActionPolicy policy = await _delegate.dispatchDecisionHandler(action);
       if (policy == WebFNavigationActionPolicy.cancel) return;
 
+      String targetPath = action.target;
+
+      if (!Uri.parse(targetPath).isAbsolute) {
+        String base = rootController.url;
+        targetPath = rootController.uriParser!.resolve(Uri.parse(base), Uri.parse(targetPath)).toString();
+      }
+
+      if (action.target.trim().startsWith('#')) {
+        String oldUrl = rootController.url;
+        HistoryModule historyModule = rootController.module.moduleManager.getModule('History')!;
+        historyModule.pushState(null, url: targetPath);
+        window.dispatchEvent(HashChangeEvent(newUrl: targetPath, oldUrl: oldUrl));
+        return;
+      }
+
       switch (action.navigationType) {
         case WebFNavigationType.navigate:
-          await rootController.load(rootController.getPreloadBundleFromUrl(action.target) ?? WebFBundle.fromUrl(action.target));
+          await rootController.load(rootController.getPreloadBundleFromUrl(targetPath) ?? WebFBundle.fromUrl(targetPath));
           break;
         case WebFNavigationType.reload:
           await rootController.reload();
diff --git a/webf/lib/src/module/history.dart b/webf/lib/src/module/history.dart

Original file line number	Diff line number	Diff line change
`@@ -302,6 +302,10 @@ bool Event::IsPopstateEvent() const {`
`302`	`302`	`return false;`
`303`	`303`	`}`
`304`	`304`
	`305`	`+bool Event::IsHashChangeEvent() const {`
	`306`	`+ return false;`
	`307`	`+}`
	`308`	`+`
`305`	`309`	`bool Event::IsIntersectionchangeEvent() const {`
`306`	`310`	`return false;`
`307`	`311`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@`
`37`	`37`	`"gestureend"`
`38`	`38`	`]`
`39`	`39`	`},`
	`40`	`+ "hashchange",`
`40`	`41`	`"input",`
`41`	`42`	`{`
`42`	`43`	`"class": "FocusEvent",`