Skip to content

fix: bypass TanStack Table minification bug and migrate to scheduleOnRN#12

Merged
kilbot merged 2 commits intomainfrom
fix/expand-collapse-minification-bug
Jan 23, 2026
Merged

fix: bypass TanStack Table minification bug and migrate to scheduleOnRN#12
kilbot merged 2 commits intomainfrom
fix/expand-collapse-minification-bug

Conversation

@kilbot
Copy link
Copy Markdown
Contributor

@kilbot kilbot commented Jan 23, 2026

Summary

  • Fix production-only bug where variations table would expand but not collapse
  • Migrate from deprecated runOnJS (reanimated) to scheduleOnRN (worklets)

Problem

TanStack Table's toggleExpanded() uses computed property destructuring with rest spread:

const { [row.id]: _, ...rest } = expandedState;

This pattern is incorrectly transpiled by some minifiers in the Expo/Metro build pipeline, causing the temporary variable to be declared but never assigned. The result: collapse silently fails in production while working in development.

Solution

  1. Bypass TanStack's updater - Added a setRowExpanded(rowId, expanded) helper that uses lodash/omit to safely remove keys without the problematic destructuring pattern

  2. Pass through context - Made setRowExpanded available to child components via VariationRowContext

  3. Updated all toggle sites - Changed row.toggleExpanded() calls to use setRowExpanded()

  4. Fixed DnD context - Same pattern existed in drag-and-drop code; fixed with inline delete

Test plan

  • Build for production web
  • Expand a variable product's variations
  • Click "Collapse" or the chevron - should collapse
  • Test on POS products tab as well
  • Verify DnD still works (if applicable)

Additional changes

Migrated runOnJSscheduleOnRN per deprecation warning:

  • variable-product-row/index.tsx
  • pulse-row.tsx
  • splash/index.tsx

Summary by CodeRabbit

  • Bug Fixes

    • Fixed row expansion behavior across product tables and resolved item removal issues in drag-and-drop flows.
  • New Features

    • Exposed an external row-expansion control so expansion state can be driven reliably from the table.
  • Performance

    • Improved scheduling for animation and state callbacks to reduce glitches and improve responsiveness.

✏️ Tip: You can customize this high-level summary in your review settings.

## Minification Bug Fix

TanStack Table's `toggleExpanded()` uses computed property destructuring
with rest spread (`const { [key]: _, ...rest } = obj`) which is incorrectly
transpiled by some minifiers, causing the collapse functionality to fail
silently in production builds.

Fix: Bypass TanStack's updater function by using `lodash/omit` and a custom
`setRowExpanded` helper that directly manipulates the expanded state.

Affected files:
- products.tsx, pos/products/index.tsx - Added setRowExpanded helper
- attributes.tsx, variable-image.tsx, filters.tsx - Use setRowExpanded
- variable-product-row/context.tsx - Pass setRowExpanded through context
- dnd/native/context.tsx - Use inline delete (can't import in worklets)

## scheduleOnRN Migration

Migrated from `runOnJS` (react-native-reanimated) to `scheduleOnRN`
(react-native-worklets) as recommended by the deprecation warning.

Affected files:
- variable-product-row/index.tsx
- pulse-row.tsx
- splash/index.tsx
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Jan 23, 2026

📝 Walkthrough

Walkthrough

Adds a table-driven row expansion API (setRowExpanded) to bypass a TanStack updater issue, migrates runOnJS scheduling to scheduleOnRN in RN worklets, and fixes a DnD context minification bug by replacing computed-destructuring with an explicit shallow-clone-and-delete for layout removal.

Changes

Cohort / File(s) Summary
DnD Context Minification Fix
packages/components/src/dnd/native/context.tsx
Replace computed-destructuring removal (const { [itemId]: _, ...rest } = obj) with an explicit shallow clone and delete when unregistering layouts; mutation performed on cloned object and assigned back on UI thread via scheduleOnUI.
RN Worklet Scheduling Migration
packages/components/src/table/pulse-row.tsx, packages/core/src/screens/splash/index.tsx, packages/core/src/screens/main/components/product/variable-product-row/index.tsx
Remove runOnJS imports/usages and switch to scheduleOnRN from react-native-worklets for scheduling JS callbacks from worklets (pulse callbacks, splash hide, animation-driven set state).
Table-expanded State Helper & Exposure
packages/core/src/screens/main/pos/products/index.tsx, packages/core/src/screens/main/products/products.tsx
Add setRowExpanded(rowId, expanded) helper that updates expandedRef (uses lodash/omit to remove keys), expose it via tableConfig.meta, and include it in memo deps to enable external expansion control.
Variation Row Context & Provider
packages/core/src/screens/main/components/product/variable-product-row/context.tsx, packages/core/src/screens/main/components/product/variable-product-row/index.tsx
Extend VariationRowContextType with rowId and setRowExpanded; add VariationRowProviderProps and accept setRowExpanded in provider, passing rowId and setRowExpanded into context.
Component-level Expansion Routing
packages/core/src/screens/main/components/product/attributes.tsx, packages/core/src/screens/main/components/product/variable-image.tsx, packages/core/src/screens/main/components/product/variable-product-row/variations/filters.tsx
Replace direct row.toggleExpanded calls with external setRowExpanded(rowId, expanded) usage; variable-image now accepts table prop and derives isExpanded from table.options.meta.expanded$ (uses rxjs map).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

Possibly related PRs

Poem

🐰 Hop, hop — I cloned the layouts clean and bright,

Cut the sneaky destructure out of sight,
RN worklets hum and schedule on cue,
Rows expand from meta, neat and true,
I nibble bugs and hop away with delight 🥕

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title accurately summarizes the two main changes: fixing a TanStack Table minification bug affecting row expansion/collapse and migrating from deprecated runOnJS to scheduleOnRN.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/core/src/screens/main/pos/products/index.tsx (1)

127-127: Missing import for ExpandedState type.

The ExpandedState type is used at line 127 but is not imported. Add the import from @tanstack/react-table:

Suggested fix
import { getExpandedRowModel } from '@tanstack/react-table';
+import type { ExpandedState } from '@tanstack/react-table';
🤖 Fix all issues with AI agents
In `@packages/core/src/screens/main/components/product/variable-image.tsx`:
- Around line 28-38: The code accesses table.options.meta.expanded$ without
guarding meta; change the usage so meta is checked consistently: read meta into
a local const (e.g., const meta = table.options.meta) and use optional chaining
or a fallback observable when calling useObservableEagerState (e.g.,
meta?.expanded$ ?? of({})), and keep setRowExpanded obtained from meta
(setRowExpanded) and handlePress unchanged but still using setRowExpanded?. This
ensures meta can be undefined without causing a runtime error while preserving
the existing setRowExpanded and isExpanded logic.
🧹 Nitpick comments (3)
packages/core/src/screens/splash/index.tsx (1)

30-34: Dependency on shared value's .value property may not trigger re-runs as expected.

The useDerivedValue hook depends on progress.value in the dependency array, but shared value contents accessed via .value don't trigger React re-renders. The hook should depend on progress (the shared value reference) instead, or simply rely on the reactive nature of progress.value access inside the worklet.

Suggested fix
 	useDerivedValue(() => {
 		if (progress.value > 0) {
 			scheduleOnRN(hideSplash);
 		}
-	}, [progress.value, hideSplash]);
+	}, [progress, hideSplash]);
packages/components/src/table/pulse-row.tsx (1)

17-22: Avoid using any type for generic parameters.

Per coding guidelines, strict types should be used instead of any. Consider using a generic type parameter for Row and Table to maintain type safety.

Suggested fix
-type PulseTableRowProps = React.ComponentPropsWithoutRef<typeof Animated.View> & {
+type PulseTableRowProps<TData = unknown> = React.ComponentPropsWithoutRef<typeof Animated.View> & {
 	onRemove?: () => void;
 	index?: number;
-	row: Row<any>;
-	table: Table<any>;
+	row: Row<TData>;
+	table: Table<TData>;
 };
packages/core/src/screens/main/components/product/variable-product-row/context.tsx (1)

27-31: Replace newly introduced any types with stricter typing.

This keeps the context and provider API safer and aligns with repo guidelines.

♻️ Suggested typing tightening
-interface VariationRowProviderProps {
-	row: any;
-	setRowExpanded?: (rowId: string, expanded: boolean) => void;
-	children: React.ReactNode;
-}
+interface VariationRowProviderProps {
+	row: { id: string };
+	setRowExpanded?: (rowId: string, expanded: boolean) => void;
+	children: React.ReactNode;
+}

-const updateQueryParams = (key: string, value: any) => {
+const updateQueryParams = (key: string, value: unknown) => {
As per coding guidelines, avoid `any`.

Also applies to: 36-39

@kilbot kilbot merged commit 0ef35a2 into main Jan 23, 2026
3 checks passed
@kilbot kilbot deleted the fix/expand-collapse-minification-bug branch January 23, 2026 15:08
This was referenced Jan 29, 2026
@coderabbitai coderabbitai bot mentioned this pull request Feb 27, 2026
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant