this repo has no description
Rewrite polyfill suspense for Composer with preload
Hopefully this works
+114
-73
+48
src/components/compose-suspense.jsx
+48
src/components/compose-suspense.jsx
···
1
+
import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
2
+
import { useEffect, useState } from 'preact/hooks';
3
+
4
+
import Loader from './loader';
5
+
6
+
const supportsIntlSegmenter = !shouldPolyfill();
7
+
8
+
function importIntlSegmenter() {
9
+
if (!supportsIntlSegmenter) {
10
+
return import('@formatjs/intl-segmenter/polyfill-force').catch(() => {});
11
+
}
12
+
}
13
+
14
+
function importCompose() {
15
+
return import('./compose');
16
+
}
17
+
18
+
export async function preload() {
19
+
try {
20
+
await importIntlSegmenter();
21
+
importCompose();
22
+
} catch (e) {
23
+
console.error(e);
24
+
}
25
+
}
26
+
27
+
export default function ComposeSuspense(props) {
28
+
const [Compose, setCompose] = useState(null);
29
+
30
+
useEffect(() => {
31
+
(async () => {
32
+
try {
33
+
if (supportsIntlSegmenter) {
34
+
const component = await importCompose();
35
+
setCompose(component);
36
+
} else {
37
+
await importIntlSegmenter();
38
+
const component = await importCompose();
39
+
setCompose(component);
40
+
}
41
+
} catch (e) {
42
+
console.error(e);
43
+
}
44
+
})();
45
+
}, []);
46
+
47
+
return Compose?.default ? <Compose.default {...props} /> : <Loader />;
48
+
}
+48
-49
src/components/modals.jsx
+48
-49
src/components/modals.jsx
···
1
-
import { lazy } from 'preact/compat';
1
+
import { useEffect } from 'preact/hooks';
2
2
import { useLocation, useNavigate } from 'react-router-dom';
3
3
import { subscribe, useSnapshot } from 'valtio';
4
4
···
9
9
import states from '../utils/states';
10
10
11
11
import AccountSheet from './account-sheet';
12
-
// import Compose from './compose';
12
+
import ComposeSuspense, { preload } from './compose-suspense';
13
13
import Drafts from './drafts';
14
14
import EmbedModal from './embed-modal';
15
15
import GenericAccounts from './generic-accounts';
16
-
import IntlSegmenterSuspense from './intl-segmenter-suspense';
17
16
import MediaAltModal from './media-alt-modal';
18
17
import MediaModal from './media-modal';
19
18
import Modal from './modal';
20
19
import ReportModal from './report-modal';
21
20
import ShortcutsSettings from './shortcuts-settings';
22
-
23
-
const Compose = lazy(() => import('./compose'));
24
21
25
22
subscribe(states, (changes) => {
26
23
for (const [action, path, value, prevValue] of changes) {
···
36
33
const navigate = useNavigate();
37
34
const location = useLocation();
38
35
36
+
useEffect(() => {
37
+
queueMicrotask(preload);
38
+
}, []);
39
+
39
40
return (
40
41
<>
41
42
{!!snapStates.showCompose && (
···
43
44
class={`solid ${snapStates.composerState.minimized ? 'min' : ''}`}
44
45
minimized={!!snapStates.composerState.minimized}
45
46
>
46
-
<IntlSegmenterSuspense>
47
-
<Compose
48
-
replyToStatus={
49
-
typeof snapStates.showCompose !== 'boolean'
50
-
? snapStates.showCompose.replyToStatus
51
-
: window.__COMPOSE__?.replyToStatus || null
52
-
}
53
-
editStatus={
54
-
states.showCompose?.editStatus ||
55
-
window.__COMPOSE__?.editStatus ||
56
-
null
57
-
}
58
-
draftStatus={
59
-
states.showCompose?.draftStatus ||
60
-
window.__COMPOSE__?.draftStatus ||
61
-
null
47
+
<ComposeSuspense
48
+
replyToStatus={
49
+
typeof snapStates.showCompose !== 'boolean'
50
+
? snapStates.showCompose.replyToStatus
51
+
: window.__COMPOSE__?.replyToStatus || null
52
+
}
53
+
editStatus={
54
+
states.showCompose?.editStatus ||
55
+
window.__COMPOSE__?.editStatus ||
56
+
null
57
+
}
58
+
draftStatus={
59
+
states.showCompose?.draftStatus ||
60
+
window.__COMPOSE__?.draftStatus ||
61
+
null
62
+
}
63
+
onClose={(results) => {
64
+
const { newStatus, instance, type } = results || {};
65
+
states.showCompose = false;
66
+
window.__COMPOSE__ = null;
67
+
if (newStatus) {
68
+
states.reloadStatusPage++;
69
+
showToast({
70
+
text: {
71
+
post: 'Post published. Check it out.',
72
+
reply: 'Reply posted. Check it out.',
73
+
edit: 'Post updated. Check it out.',
74
+
}[type || 'post'],
75
+
delay: 1000,
76
+
duration: 10_000, // 10 seconds
77
+
onClick: (toast) => {
78
+
toast.hideToast();
79
+
states.prevLocation = location;
80
+
navigate(
81
+
instance
82
+
? `/${instance}/s/${newStatus.id}`
83
+
: `/s/${newStatus.id}`,
84
+
);
85
+
},
86
+
});
62
87
}
63
-
onClose={(results) => {
64
-
const { newStatus, instance, type } = results || {};
65
-
states.showCompose = false;
66
-
window.__COMPOSE__ = null;
67
-
if (newStatus) {
68
-
states.reloadStatusPage++;
69
-
showToast({
70
-
text: {
71
-
post: 'Post published. Check it out.',
72
-
reply: 'Reply posted. Check it out.',
73
-
edit: 'Post updated. Check it out.',
74
-
}[type || 'post'],
75
-
delay: 1000,
76
-
duration: 10_000, // 10 seconds
77
-
onClick: (toast) => {
78
-
toast.hideToast();
79
-
states.prevLocation = location;
80
-
navigate(
81
-
instance
82
-
? `/${instance}/s/${newStatus.id}`
83
-
: `/s/${newStatus.id}`,
84
-
);
85
-
},
86
-
});
87
-
}
88
-
}}
89
-
/>
90
-
</IntlSegmenterSuspense>
88
+
}}
89
+
/>
91
90
</Modal>
92
91
)}
93
92
{!!snapStates.showSettings && (
+18
-24
src/compose.jsx
+18
-24
src/compose.jsx
···
3
3
import './app.css';
4
4
5
5
import { render } from 'preact';
6
-
import { lazy } from 'preact/compat';
7
6
import { useEffect, useState } from 'preact/hooks';
8
7
9
-
import IntlSegmenterSuspense from './components/intl-segmenter-suspense';
8
+
import ComposeSuspense from './components/compose-suspense';
10
9
import { initStates } from './utils/states';
11
-
// import Compose from './components/compose';
12
10
import useTitle from './utils/useTitle';
13
-
14
-
const Compose = lazy(() => import('./components/compose'));
15
11
16
12
if (window.opener) {
17
13
console = window.opener.console;
···
66
62
console.debug('OPEN COMPOSE');
67
63
68
64
return (
69
-
<IntlSegmenterSuspense>
70
-
<Compose
71
-
editStatus={editStatus}
72
-
replyToStatus={replyToStatus}
73
-
draftStatus={draftStatus}
74
-
standalone
75
-
hasOpener={window.opener}
76
-
onClose={(results) => {
77
-
const { newStatus, fn = () => {} } = results || {};
78
-
try {
79
-
if (newStatus) {
80
-
window.opener.__STATES__.reloadStatusPage++;
81
-
}
82
-
fn();
83
-
setUIState('closed');
84
-
} catch (e) {}
85
-
}}
86
-
/>
87
-
</IntlSegmenterSuspense>
65
+
<ComposeSuspense
66
+
editStatus={editStatus}
67
+
replyToStatus={replyToStatus}
68
+
draftStatus={draftStatus}
69
+
standalone
70
+
hasOpener={window.opener}
71
+
onClose={(results) => {
72
+
const { newStatus, fn = () => {} } = results || {};
73
+
try {
74
+
if (newStatus) {
75
+
window.opener.__STATES__.reloadStatusPage++;
76
+
}
77
+
fn();
78
+
setUIState('closed');
79
+
} catch (e) {}
80
+
}}
81
+
/>
88
82
);
89
83
}
90
84