v0.6.73: zustand v5 migration fix

Author: icecrasher321

.github/workflows/test-build.yml

@@ -109,6 +109,9 @@ jobs:
       - name: API contract boundary audit
         run: bun run check:api-validation:strict
 
+      - name: Zustand v5 selector audit
+        run: bun run check:zustand-v5
+
       - name: Verify realtime prune graph
         run: bun run check:realtime-prune
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback } from 'react'
 import { ArrowLeftRight, ArrowUpDown, Circle, CircleOff, Lock, LogOut, Unlock } from 'lucide-react'
+import { useShallow } from 'zustand/react/shallow'
 import { Button, Copy, PlayOutline, Tooltip, Trash2 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { isInputDefinitionTrigger } from '@/lib/workflows/triggers/input-definition-triggers'
@@ -51,7 +52,7 @@ export const ActionBar = memo(
       collaborativeBatchToggleBlockHandles,
       collaborativeBatchToggleLocked,
     } = useCollaborativeWorkflow()
-    const { setPendingSelection } = useWorkflowRegistry()
+    const setPendingSelection = useWorkflowRegistry((state) => state.setPendingSelection)
     const { handleRunFromBlock } = useWorkflowExecution()
 
     const addNotification = useNotificationStore((s) => s.addNotification)
@@ -94,26 +95,28 @@ export const ActionBar = memo(
       isParentLocked,
       isParentDisabled,
     } = useWorkflowStore(
-      useCallback(
-        (state) => {
-          const block = state.blocks[blockId]
-          const parentId = block?.data?.parentId
-          const parentBlock = parentId ? state.blocks[parentId] : undefined
-          return {
-            isEnabled: block?.enabled ?? true,
-            horizontalHandles: block?.horizontalHandles ?? false,
-            parentId,
-            parentType: parentBlock?.type,
-            isLocked: block?.locked ?? false,
-            isParentLocked: parentBlock?.locked ?? false,
-            isParentDisabled: parentBlock ? !parentBlock.enabled : false,
-          }
-        },
-        [blockId]
+      useShallow(
+        useCallback(
+          (state) => {
+            const block = state.blocks[blockId]
+            const parentId = block?.data?.parentId
+            const parentBlock = parentId ? state.blocks[parentId] : undefined
+            return {
+              isEnabled: block?.enabled ?? true,
+              horizontalHandles: block?.horizontalHandles ?? false,
+              parentId,
+              parentType: parentBlock?.type,
+              isLocked: block?.locked ?? false,
+              isParentLocked: parentBlock?.locked ?? false,
+              isParentDisabled: parentBlock ? !parentBlock.enabled : false,
+            }
+          },
+          [blockId]
+        )
       )
     )
 
-    const { activeWorkflowId } = useWorkflowRegistry()
+    const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
     const isExecuting = useIsCurrentWorkflowExecuting()
     const getLastExecutionSnapshot = useExecutionStore((s) => s.getLastExecutionSnapshot)
     const userPermissions = useUserPermissionsContext()

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx

@@ -14,7 +14,7 @@ import type { ConnectedBlock } from '@/app/workspace/[workspaceId]/w/[workflowId
 import { useBlockOutputFields } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-output-fields'
 import { getBlock } from '@/blocks/registry'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import { EMPTY_SUBBLOCK_VALUES, useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('ConnectionBlocks')
@@ -148,7 +148,7 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
 
   const workflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const workflowSubBlockValues = useSubBlockStore((state) =>
-    workflowId ? (state.workflowValues[workflowId] ?? {}) : {}
+    workflowId ? (state.workflowValues[workflowId] ?? EMPTY_SUBBLOCK_VALUES) : EMPTY_SUBBLOCK_VALUES
   )
 
   const getMergedSubBlocks = useCallback(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx

@@ -54,7 +54,7 @@ export function CredentialSelector({
   const [showOAuthModal, setShowOAuthModal] = useState(false)
   const [editingValue, setEditingValue] = useState('')
   const [isEditing, setIsEditing] = useState(false)
-  const { activeWorkflowId } = useWorkflowRegistry()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const [storeValue, setStoreValue] = useSubBlockValue<string | null>(blockId, subBlock.id)
 
   const requiredScopes = subBlock.requiredScopes || []

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx

@@ -160,7 +160,7 @@ export function FileUpload({
 
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  const { activeWorkflowId } = useWorkflowRegistry()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const params = useParams()
   const workspaceId = params?.workspaceId as string
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { isEqual } from 'es-toolkit'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
+import { useStoreWithEqualityFn } from 'zustand/traditional'
 import {
   Popover,
   PopoverAnchor,
@@ -37,6 +39,8 @@ import { EMPTY_SUBBLOCK_VALUES, useSubBlockStore } from '@/stores/workflows/subb
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 
+const EMPTY_VARIABLES: Variable[] = []
+
 /**
  * Context for sharing nested navigation state between components.
  * This enables unlimited nesting depth with a single back button.
@@ -997,8 +1001,17 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     [blocks, workflowSubBlockValues]
   )
 
-  const getVariablesByWorkflowId = useVariablesStore((state) => state.getVariablesByWorkflowId)
-  const workflowVariables = workflowId ? getVariablesByWorkflowId(workflowId) : []
+  const workflowVariables = useStoreWithEqualityFn(
+    useVariablesStore,
+    useCallback(
+      (state) =>
+        workflowId
+          ? Object.values(state.variables).filter((variable) => variable.workflowId === workflowId)
+          : EMPTY_VARIABLES,
+      [workflowId]
+    ),
+    isEqual
+  )
 
   const searchTerm = useMemo(
     () => getTagSearchTerm(inputValue, cursorPosition),

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ChevronDown, ChevronRight, ChevronUp, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { useShallow } from 'zustand/react/shallow'
 import { Button, Input } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { getWorkflowSearchDependentClears } from '@/lib/workflows/search-replace/dependencies'
@@ -126,7 +127,21 @@ export function WorkflowSearchReplace() {
     setQuery,
     setReplacement,
     setActiveMatchId,
-  } = useWorkflowSearchReplaceStore()
+  } = useWorkflowSearchReplaceStore(
+    useShallow((state) => ({
+      isOpen: state.isOpen,
+      query: state.query,
+      replacement: state.replacement,
+      activeMatchId: state.activeMatchId,
+      position: state.position,
+      close: state.close,
+      open: state.open,
+      setPosition: state.setPosition,
+      setQuery: state.setQuery,
+      setReplacement: state.setReplacement,
+      setActiveMatchId: state.setActiveMatchId,
+    }))
+  )
   const { data: workspaceCredentials } = useWorkspaceCredentials({ workspaceId, enabled: isOpen })
 
   useRegisterGlobalCommands([

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-block-properties.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowBlockProps } from '../types'
 
@@ -43,18 +44,20 @@ export function useBlockProperties(
     storeBlockAdvancedMode,
     storeBlockTriggerMode,
   } = useWorkflowStore(
-    useCallback(
-      (state) => {
-        const block = state.blocks[blockId]
-        return {
-          storeHorizontalHandles: block?.horizontalHandles ?? true,
-          storeBlockHeight: block?.height ?? 0,
-          storeBlockLayout: block?.layout,
-          storeBlockAdvancedMode: block?.advancedMode ?? false,
-          storeBlockTriggerMode: block?.triggerMode ?? false,
-        }
-      },
-      [blockId]
+    useShallow(
+      useCallback(
+        (state) => {
+          const block = state.blocks[blockId]
+          return {
+            storeHorizontalHandles: block?.horizontalHandles ?? true,
+            storeBlockHeight: block?.height ?? 0,
+            storeBlockLayout: block?.layout,
+            storeBlockAdvancedMode: block?.advancedMode ?? false,
+            storeBlockTriggerMode: block?.triggerMode ?? false,
+          }
+        },
+        [blockId]
+      )
     )
   )
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-folder-expand.ts

@@ -1,6 +1,9 @@
 import { useCallback } from 'react'
 import { useFolderStore } from '@/stores/folders/store'
 
+const toggleFolderExpanded = useFolderStore.getState().toggleExpanded
+const setFolderExpanded = useFolderStore.getState().setExpanded
+
 interface UseFolderExpandProps {
   folderId: string
 }
@@ -13,22 +16,22 @@ interface UseFolderExpandProps {
  * @returns Expansion state and event handlers
  */
 export function useFolderExpand({ folderId }: UseFolderExpandProps) {
-  const { expandedFolders, toggleExpanded, setExpanded } = useFolderStore()
+  const expandedFolders = useFolderStore((state) => state.expandedFolders)
   const isExpanded = expandedFolders.has(folderId)
 
   /**
    * Toggle folder expansion state
    */
   const handleToggleExpanded = useCallback(() => {
-    toggleExpanded(folderId)
-  }, [folderId, toggleExpanded])
+    toggleFolderExpanded(folderId)
+  }, [folderId])
 
   /**
    * Expand the folder (useful when creating items inside)
    */
   const expandFolder = useCallback(() => {
-    setExpanded(folderId, true)
-  }, [folderId, setExpanded])
+    setFolderExpanded(folderId, true)
+  }, [folderId])
 
   /**
    * Handle keyboard navigation (Enter/Space)

apps/sim/components/emcn/components/badge/badge.tsx

@@ -1,4 +1,4 @@
-import type * as React from 'react'
+import { forwardRef, type HTMLAttributes } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -72,7 +72,7 @@ const ICON_SIZES: Record<string, string> = {
 }
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {
   /** Displays a dot indicator before content (only for color variants) */
   dot?: boolean
@@ -92,27 +92,23 @@ export interface BadgeProps
  * Status color variants can display a dot indicator via the `dot` prop.
  * All variants support an optional `icon` prop for leading icons.
  */
-function Badge({
-  className,
-  variant,
-  size,
-  dot = false,
-  icon: Icon,
-  children,
-  ...props
-}: BadgeProps) {
+const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  { className, variant, size, dot = false, icon: Icon, children, ...props },
+  ref
+) {
   const isStatusVariant = STATUS_VARIANTS.includes(variant as (typeof STATUS_VARIANTS)[number])
   const effectiveSize = size ?? 'md'
 
   return (
-    <div className={cn(badgeVariants({ variant, size }), className)} {...props}>
+    <div ref={ref} className={cn(badgeVariants({ variant, size }), className)} {...props}>
       {isStatusVariant && dot && (
         <div className={cn('rounded-xs bg-current', DOT_SIZES[effectiveSize])} />
       )}
       {Icon && <Icon className={ICON_SIZES[effectiveSize]} />}
       {children}
     </div>
   )
-}
+})
+Badge.displayName = 'Badge'
 
 export { Badge, badgeVariants }