Another attempt to conditional load Intl.Segmenter polyfill

src/components/intl-segmenter-suspense.jsx

@@ -0,0 +1,21 @@
+import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
+import { Suspense } from 'preact/compat';
+import { useEffect, useState } from 'preact/hooks';
+
+const supportsIntlSegmenter = !shouldPolyfill();
+
+export default function IntlSegmenterSuspense({ children }) {
+  if (supportsIntlSegmenter) {
+    return <Suspense>{children}</Suspense>;
+  }
+
+  const [polyfillLoaded, setPolyfillLoaded] = useState(false);
+  useEffect(() => {
+    (async () => {
+      await import('@formatjs/intl-segmenter/polyfill-force');
+      setPolyfillLoaded(true);
+    })();
+  }, []);
+
+  return polyfillLoaded && <Suspense>{children}</Suspense>;
+}

src/components/modals.jsx

@@ -1,3 +1,4 @@
+import { lazy } from 'preact/compat';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { subscribe, useSnapshot } from 'valtio';
 
@@ -8,16 +9,19 @@ import showToast from '../utils/show-toast';
 import states from '../utils/states';
 
 import AccountSheet from './account-sheet';
-import Compose from './compose';
+// import Compose from './compose';
 import Drafts from './drafts';
 import EmbedModal from './embed-modal';
 import GenericAccounts from './generic-accounts';
+import IntlSegmenterSuspense from './intl-segmenter-suspense';
 import MediaAltModal from './media-alt-modal';
 import MediaModal from './media-modal';
 import Modal from './modal';
 import ReportModal from './report-modal';
 import ShortcutsSettings from './shortcuts-settings';
 
+const Compose = lazy(() => import('./compose'));
+
 subscribe(states, (changes) => {
   for (const [action, path, value, prevValue] of changes) {
     // When closing modal, focus on deck
@@ -36,49 +40,51 @@ export default function Modals() {
     <>
       {!!snapStates.showCompose && (
         <Modal class="solid">
-          <Compose
-            replyToStatus={
-              typeof snapStates.showCompose !== 'boolean'
-                ? snapStates.showCompose.replyToStatus
-                : window.__COMPOSE__?.replyToStatus || null
-            }
-            editStatus={
-              states.showCompose?.editStatus ||
-              window.__COMPOSE__?.editStatus ||
-              null
-            }
-            draftStatus={
-              states.showCompose?.draftStatus ||
-              window.__COMPOSE__?.draftStatus ||
-              null
-            }
-            onClose={(results) => {
-              const { newStatus, instance, type } = results || {};
-              states.showCompose = false;
-              window.__COMPOSE__ = null;
-              if (newStatus) {
-                states.reloadStatusPage++;
-                showToast({
-                  text: {
-                    post: 'Post published. Check it out.',
-                    reply: 'Reply posted. Check it out.',
-                    edit: 'Post updated. Check it out.',
-                  }[type || 'post'],
-                  delay: 1000,
-                  duration: 10_000, // 10 seconds
-                  onClick: (toast) => {
-                    toast.hideToast();
-                    states.prevLocation = location;
-                    navigate(
-                      instance
-                        ? `/${instance}/s/${newStatus.id}`
-                        : `/s/${newStatus.id}`,
-                    );
-                  },
-                });
+          <IntlSegmenterSuspense>
+            <Compose
+              replyToStatus={
+                typeof snapStates.showCompose !== 'boolean'
+                  ? snapStates.showCompose.replyToStatus
+                  : window.__COMPOSE__?.replyToStatus || null
               }
-            }}
-          />
+              editStatus={
+                states.showCompose?.editStatus ||
+                window.__COMPOSE__?.editStatus ||
+                null
+              }
+              draftStatus={
+                states.showCompose?.draftStatus ||
+                window.__COMPOSE__?.draftStatus ||
+                null
+              }
+              onClose={(results) => {
+                const { newStatus, instance, type } = results || {};
+                states.showCompose = false;
+                window.__COMPOSE__ = null;
+                if (newStatus) {
+                  states.reloadStatusPage++;
+                  showToast({
+                    text: {
+                      post: 'Post published. Check it out.',
+                      reply: 'Reply posted. Check it out.',
+                      edit: 'Post updated. Check it out.',
+                    }[type || 'post'],
+                    delay: 1000,
+                    duration: 10_000, // 10 seconds
+                    onClick: (toast) => {
+                      toast.hideToast();
+                      states.prevLocation = location;
+                      navigate(
+                        instance
+                          ? `/${instance}/s/${newStatus.id}`
+                          : `/s/${newStatus.id}`,
+                      );
+                    },
+                  });
+                }
+              }}
+            />
+          </IntlSegmenterSuspense>
         </Modal>
       )}
       {!!snapStates.showSettings && (

src/compose.jsx

@@ -3,11 +3,15 @@ import './index.css';
 import './app.css';
 
 import { render } from 'preact';
+import { lazy } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 
-import Compose from './components/compose';
+import IntlSegmenterSuspense from './components/intl-segmenter-suspense';
+// import Compose from './components/compose';
 import useTitle from './utils/useTitle';
 
+const Compose = lazy(() => import('./components/compose'));
+
 if (window.opener) {
   console = window.opener.console;
 }
@@ -57,23 +61,25 @@ function App() {
   console.debug('OPEN COMPOSE');
 
   return (
-    <Compose
-      editStatus={editStatus}
-      replyToStatus={replyToStatus}
-      draftStatus={draftStatus}
-      standalone
-      hasOpener={window.opener}
-      onClose={(results) => {
-        const { newStatus, fn = () => {} } = results || {};
-        try {
-          if (newStatus) {
-            window.opener.__STATES__.reloadStatusPage++;
-          }
-          fn();
-          setUIState('closed');
-        } catch (e) {}
-      }}
-    />
+    <IntlSegmenterSuspense>
+      <Compose
+        editStatus={editStatus}
+        replyToStatus={replyToStatus}
+        draftStatus={draftStatus}
+        standalone
+        hasOpener={window.opener}
+        onClose={(results) => {
+          const { newStatus, fn = () => {} } = results || {};
+          try {
+            if (newStatus) {
+              window.opener.__STATES__.reloadStatusPage++;
+            }
+            fn();
+            setUIState('closed');
+          } catch (e) {}
+        }}
+      />
+    </IntlSegmenterSuspense>
   );
 }
 

src/main.jsx

@@ -4,7 +4,7 @@ import './cloak-mode.css';
 
 // Polyfill needed for Firefox < 122
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1423593
-import '@formatjs/intl-segmenter/polyfill';
+// import '@formatjs/intl-segmenter/polyfill';
 import { render } from 'preact';
 import { HashRouter } from 'react-router-dom';
 

vite.config.js

@@ -118,9 +118,9 @@ export default defineConfig({
         compose: resolve(__dirname, 'compose/index.html'),
       },
       output: {
-        manualChunks: {
-          'intl-segmenter-polyfill': ['@formatjs/intl-segmenter/polyfill'],
-        },
+        // manualChunks: {
+        //   'intl-segmenter-polyfill': ['@formatjs/intl-segmenter/polyfill'],
+        // },
         chunkFileNames: (chunkInfo) => {
           const { facadeModuleId } = chunkInfo;
           if (facadeModuleId && facadeModuleId.includes('icon')) {