diff --git a/src/components/intl-segmenter-suspense.jsx b/src/components/intl-segmenter-suspense.jsx new file mode 100644 index 0000000..965c69b --- /dev/null +++ b/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 {children}; + } + + const [polyfillLoaded, setPolyfillLoaded] = useState(false); + useEffect(() => { + (async () => { + await import('@formatjs/intl-segmenter/polyfill-force'); + setPolyfillLoaded(true); + })(); + }, []); + + return polyfillLoaded && {children}; +} diff --git a/src/components/modals.jsx b/src/components/modals.jsx index 17474e9..2772c9b 100644 --- a/src/components/modals.jsx +++ b/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 && ( - { - 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}`, - ); - }, - }); + + + 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}`, + ); + }, + }); + } + }} + /> + )} {!!snapStates.showSettings && ( diff --git a/src/compose.jsx b/src/compose.jsx index 3085635..9f5a898 100644 --- a/src/compose.jsx +++ b/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 ( - { - const { newStatus, fn = () => {} } = results || {}; - try { - if (newStatus) { - window.opener.__STATES__.reloadStatusPage++; - } - fn(); - setUIState('closed'); - } catch (e) {} - }} - /> + + { + const { newStatus, fn = () => {} } = results || {}; + try { + if (newStatus) { + window.opener.__STATES__.reloadStatusPage++; + } + fn(); + setUIState('closed'); + } catch (e) {} + }} + /> + ); } diff --git a/src/main.jsx b/src/main.jsx index 19a84c6..60aa799 100644 --- a/src/main.jsx +++ b/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'; diff --git a/vite.config.js b/vite.config.js index 3c187ba..b66daa9 100644 --- a/vite.config.js +++ b/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')) {