diff --git a/src/components/intl-segmenter-suspense.jsx b/src/components/intl-segmenter-suspense.jsx
new file mode 100644
index 00000000..965c69b5
--- /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 17474e92..2772c9b8 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 30856359..9f5a898e 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 19a84c69..60aa799a 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 3c187baa..b66daa95 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')) {