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,6 +40,7 @@ export default function Modals() {
     <>
       {!!snapStates.showCompose && (
         <Modal class="solid">
+          <IntlSegmenterSuspense>
             <Compose
               replyToStatus={
                 typeof snapStates.showCompose !== 'boolean'
@@ -79,6 +84,7 @@ export default function Modals() {
                 }
               }}
             />
+          </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,6 +61,7 @@ function App() {
   console.debug('OPEN COMPOSE');
 
   return (
+    <IntlSegmenterSuspense>
       <Compose
         editStatus={editStatus}
         replyToStatus={replyToStatus}
@@ -74,6 +79,7 @@ function App() {
           } 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')) {