fix(widget): theme not sync on firefox

devrsi0n · Sep 17, 2022 · ecaa050 · ecaa050 · vercel · Sep 17, 2022
1 parent b2928b1
commit ecaa050
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 19 deletions.
diff --git a/apps/comment-bootstrapper/package.json b/apps/comment-bootstrapper/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "main": "./dist/index.js",
   "scripts": {
-    "dev": " vite",
+    "dev": "vite",
     "build": "node ./scripts/build.js",
     "build:debug": "VITE_DEBUG=true pnpm build",
     "test": "jest --silent=false"

diff --git a/apps/comment-bootstrapper/scripts/build.js b/apps/comment-bootstrapper/scripts/build.js
@@ -22,6 +22,7 @@ const commonBuildConfig = {
  */
 const publicConfig = {
   build: {
+    watch: !!process.env.VITE_DEBUG,
     lib: {
       entry: path.resolve(__dirname, '../src/index.ts'),
       name: 'comment',

diff --git a/apps/comment-bootstrapper/src/lib/comment-bootstrapper.ts b/apps/comment-bootstrapper/src/lib/comment-bootstrapper.ts
@@ -90,7 +90,7 @@ export async function initCommentWidget(): Promise<void> {
   observeWidgetLoadedEvent(iframe);
   iframe.src = `${
     process.env.NEXT_PUBLIC_APP_URL
-  }/widget/comment/${encodeURIComponent(page.url)}`;
+  }/widget/comment/${encodeURIComponent(page.url)}?referrer=${location.origin}`;
   observeAndBroadcastThemeChange(iframe, renderTarget);
   renderTarget.append(iframe);
 }

diff --git a/apps/main/src/hooks/use-widget-side-effects.ts b/apps/main/src/hooks/use-widget-side-effects.ts
@@ -7,6 +7,8 @@ import {
   EVENT_WIDGET_LOADED,
 } from '$/lib/constants';
 
+import { useEventListener } from './use-event-listener';
+
 /**
  * Register widget events
  */
@@ -34,23 +36,15 @@ export function useWidgetSideEffects(): void {
 
   const { setTheme } = useTheme();
 
-  React.useEffect(() => {
-    function handleMessage(event: MessageEvent): void {
-      if (event.origin !== getProjectOrigin()) {
-        return;
-      }
-      if (event.data === EVENT_CLICK_CONTAINER) {
-        unexpandedPopup('[id^="headlessui-menu-button"]');
-        unexpandedPopup('[id^="headlessui-listbox-button"]');
-        unexpandedPopup('[id^="headlessui-popover-button"]');
-      } else if (event.data.name === EVENT_CHANGE_THEME) {
-        setTheme(event.data.value);
-      }
+  useEventListener('message', (event) => {
+    if (event.data === EVENT_CLICK_CONTAINER) {
+      unexpandedPopup('[id^="headlessui-menu-button"]');
+      unexpandedPopup('[id^="headlessui-listbox-button"]');
+      unexpandedPopup('[id^="headlessui-popover-button"]');
+    } else if (event.data.name === EVENT_CHANGE_THEME) {
+      setTheme(event.data.value);
     }
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  });
 }
 
 // Close popup when user clicks on the out side of iframe
@@ -69,4 +63,4 @@ function sendMessageToParentPage(data: $TsAny, projectOrigin: string) {
 }
 
 const getProjectOrigin = () =>
-  document.referrer ? new URL(document.referrer).origin : '*';
+  new URL(location.href).searchParams.get('referrer') || '*';