mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-24 02:05:39 +03:00
Code Issues Projects Releases Packages Wiki Activity

Another attempt to conditional load Intl.Segmenter polyfill

Browse source
This commit is contained in:
Lim Chee Aun 2024-03-25 19:31:25 +08:00
parent c9bbca9e11
commit c8c96f08ac
5 changed files with 98 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/intl-segmenter-suspense.jsx Normal file
View file

@ -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>;
}

92
src/components/modals.jsx
View file

@ -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 && (

42
src/compose.jsx
View file

@ -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>
);
}

2
src/main.jsx
View file

@ -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';

6
vite.config.js
View file

@ -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')) {