Move useScopeValue hook to shared hooks folder and wrap setValue in a function (#5386)

GitOrigin-RevId: b1a6a4e871af3b52fb3d100a83b479c834cb75ca

services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js

@@ -5,7 +5,7 @@ import { Alert } from 'react-bootstrap'
 import PdfViewerControls from './pdf-viewer-controls'
 import { useProjectContext } from '../../../shared/context/project-context'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
-import useScopeValue from '../../../shared/context/util/scope-value-hook'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
 import { buildHighlightElement } from '../util/highlights'
 import PDFJSWrapper from '../util/pdf-js-wrapper'
 import withErrorBoundary from '../../../infrastructure/error-boundary'

services/web/frontend/js/features/pdf-preview/components/pdf-viewer.js

@@ -1,4 +1,4 @@
-import useScopeValue from '../../../shared/context/util/scope-value-hook'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
 import { usePdfPreviewContext } from '../contexts/pdf-preview-context'
 import { lazy, memo, useEffect } from 'react'
 

services/web/frontend/js/features/pdf-preview/contexts/pdf-preview-context.js

@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from '../../../shared/context/util/scope-value-hook'
+import useScopeValue from '../../../shared/hooks/use-scope-value'
 import { useProjectContext } from '../../../shared/context/project-context'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
 import {

services/web/frontend/js/shared/context/compile-context.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 
 export const CompileContext = createContext()
 

services/web/frontend/js/shared/context/editor-context.js

@@ -6,7 +6,7 @@ import {
   useMemo,
 } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 import useBrowserWindow from '../hooks/use-browser-window'
 import { useIdeContext } from './ide-context'
 import { useProjectContext } from './project-context'

services/web/frontend/js/shared/context/layout-context.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 import { useIdeContext } from './ide-context'
 
 export const LayoutContext = createContext()

services/web/frontend/js/shared/context/project-context.js

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 
 const ProjectContext = createContext()
 

services/web/frontend/js/shared/context/user-context.js

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import PropTypes from 'prop-types'
-import useScopeValue from './util/scope-value-hook'
+import useScopeValue from '../hooks/use-scope-value'
 
 export const UserContext = createContext()
 

services/web/frontend/js/shared/hooks/use-scope-value.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
-import { useIdeContext } from '../ide-context'
+import { useIdeContext } from '../context/ide-context'
 
 /**
  * Binds a property in an Angular scope making it accessible in a React
@@ -23,7 +23,11 @@ export default function useScopeValue(path, deep = false) {
     return $scope.$watch(
       path,
       newValue => {
-        setValue(deep ? _.cloneDeep(newValue) : newValue)
+        setValue(() => {
+          // NOTE: this is deliberately wrapped in a function,
+          // to avoid calling setValue directly with a value that's a function
+          return deep ? _.cloneDeep(newValue) : newValue
+        })
       },
       deep
     )

services/web/frontend/stories/pdf-js-viewer.stories.js

@@ -5,7 +5,7 @@ import { Button } from 'react-bootstrap'
 import { useCallback } from 'react'
 import { withContextRoot } from './utils/with-context-root'
 import { setupContext } from './fixtures/context'
-import useScopeValue from '../js/shared/context/util/scope-value-hook'
+import useScopeValue from '../js/shared/hooks/use-scope-value'
 
 setupContext()