Unblock React Compiler for 5 components by removing render-phase mutation
Four shapes of writing to something the compiler has frozen: - Reanimated shared values written as `sv.value = x`, now `sv.set(x)` to match the sibling calls already in those files - debug globals installed during render, now installed in an effect - a running flag mutated inside a `.filter()` callback, now a plain loop - tagging metadata inside a hook, now a module-scope helper Skipped components: 125 -> 120. Composer also loses its Immutability error but stays skipped on a Refs error underneath. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -11,14 +11,18 @@ import {
|
|||||||
* Thin `useMemo` wrapper that marks the metadata as memoized and provides a
|
* Thin `useMemo` wrapper that marks the metadata as memoized and provides a
|
||||||
* type guard.
|
* type guard.
|
||||||
*/
|
*/
|
||||||
export function useMeta(metadata?: MergeableMetadata) {
|
function markMemoized<T extends MergeableMetadata>(m: T): T {
|
||||||
const m = useMemo(() => metadata, [metadata])
|
|
||||||
if (!m) return
|
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
m.__meta = true
|
m.__meta = true
|
||||||
return m
|
return m
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function useMeta(metadata?: MergeableMetadata) {
|
||||||
|
const m = useMemo(() => metadata, [metadata])
|
||||||
|
if (!m) return
|
||||||
|
return markMemoized(m)
|
||||||
|
}
|
||||||
|
|
||||||
export function accountToSessionMetadata(
|
export function accountToSessionMetadata(
|
||||||
account: SessionAccount | undefined,
|
account: SessionAccount | undefined,
|
||||||
): SessionMetadata | undefined {
|
): SessionMetadata | undefined {
|
||||||
|
|||||||
@@ -362,9 +362,9 @@ export function Composer({
|
|||||||
onKeyPress={IS_WEB ? onKeyPressWeb : undefined}
|
onKeyPress={IS_WEB ? onKeyPressWeb : undefined}
|
||||||
onScroll={e => {
|
onScroll={e => {
|
||||||
if (IS_WEB) {
|
if (IS_WEB) {
|
||||||
inputScrollSharedValue.value = (e.target as any).scrollTop
|
inputScrollSharedValue.set((e.target as any).scrollTop)
|
||||||
} else {
|
} else {
|
||||||
inputScrollSharedValue.value = e.nativeEvent.contentOffset.y
|
inputScrollSharedValue.set(e.nativeEvent.contentOffset.y)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
// @ts-expect-error web only
|
// @ts-expect-error web only
|
||||||
|
|||||||
@@ -116,14 +116,15 @@ function Inner({
|
|||||||
setActiveNux(undefined)
|
setActiveNux(undefined)
|
||||||
}, [activeNux, setActiveNux])
|
}, [activeNux, setActiveNux])
|
||||||
|
|
||||||
if (__DEV__ && typeof window !== 'undefined') {
|
useEffect(() => {
|
||||||
// @ts-expect-error
|
if (!__DEV__ || typeof window === 'undefined') return
|
||||||
|
// @ts-expect-error debug only
|
||||||
window.clearNuxDialog = (id: Nux) => {
|
window.clearNuxDialog = (id: Nux) => {
|
||||||
if (!__DEV__ || !id) return
|
if (!id) return
|
||||||
resetNuxs([id])
|
resetNuxs([id])
|
||||||
unsnooze()
|
unsnooze()
|
||||||
}
|
}
|
||||||
}
|
}, [resetNuxs])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (snoozed) return // comment this out to test
|
if (snoozed) return // comment this out to test
|
||||||
|
|||||||
@@ -101,25 +101,23 @@ function ContentHiderActive({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* A plain loop rather than `.filter()`: the running flag has to be mutated
|
||||||
|
* from the enclosing scope, which React Compiler cannot lower inside a
|
||||||
|
* callback. Keeps only the first adult-content label, as before.
|
||||||
|
*/
|
||||||
|
const selfBlurCauses = []
|
||||||
let hasAdultContentLabel = false
|
let hasAdultContentLabel = false
|
||||||
const selfBlurNames = modui.blurs
|
for (const cause of modui.blurs) {
|
||||||
.filter(cause => {
|
if (cause.type !== 'label') continue
|
||||||
if (cause.type !== 'label') {
|
if (cause.source.type !== 'user') continue
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (cause.source.type !== 'user') {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (ADULT_CONTENT_LABELS.includes(cause.label.val as AdultSelfLabel)) {
|
if (ADULT_CONTENT_LABELS.includes(cause.label.val as AdultSelfLabel)) {
|
||||||
if (hasAdultContentLabel) {
|
if (hasAdultContentLabel) continue
|
||||||
return false
|
|
||||||
}
|
|
||||||
hasAdultContentLabel = true
|
hasAdultContentLabel = true
|
||||||
}
|
}
|
||||||
return true
|
selfBlurCauses.push(cause)
|
||||||
})
|
}
|
||||||
.slice(0, 2)
|
const selfBlurNames = selfBlurCauses.slice(0, 2).map(cause => {
|
||||||
.map(cause => {
|
|
||||||
if (cause.type !== 'label') {
|
if (cause.type !== 'label') {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -683,9 +683,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
|
|||||||
const bundle = state.currentBundleState.bundle as unknown as
|
const bundle = state.currentBundleState.bundle as unknown as
|
||||||
SessionBundle | PublicSessionBundle
|
SessionBundle | PublicSessionBundle
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!__DEV__ || !IS_WEB) return
|
||||||
// @ts-expect-error window type is not declared, debug only
|
// @ts-expect-error window type is not declared, debug only
|
||||||
// eslint-disable-next-line react-hooks/immutability
|
window.bundle = bundle
|
||||||
if (__DEV__ && IS_WEB) window.bundle = bundle
|
}, [bundle])
|
||||||
|
|
||||||
const currentBundleRef = useRef(bundle)
|
const currentBundleRef = useRef(bundle)
|
||||||
/*
|
/*
|
||||||
|
|||||||
@@ -332,7 +332,7 @@ export function TabBar({
|
|||||||
syncScrollState.set('unsynced')
|
syncScrollState.set('unsynced')
|
||||||
}}
|
}}
|
||||||
onScroll={e => {
|
onScroll={e => {
|
||||||
scrollX.value = Math.round(e.nativeEvent.contentOffset.x)
|
scrollX.set(Math.round(e.nativeEvent.contentOffset.x))
|
||||||
}}>
|
}}>
|
||||||
<Animated.View
|
<Animated.View
|
||||||
onLayout={e => {
|
onLayout={e => {
|
||||||
|
|||||||
Reference in New Issue
Block a user