Repository: pmndrs/zustand
File: src/middleware/devtools.ts (TypeScript)

Code before:
      }
  ): S => {
    let didWarnAboutNameDeprecation = false
    if (typeof options === 'string' && !didWarnAboutNameDeprecation) {
      console.warn(
        '[zustand devtools middleware]: passing `name` as directly will be not allowed in next major' +
          'pass the `name` in an object `{ name: ... }` instead'
      )
      didWarnAboutNameDeprecation = true
    }
    const devtoolsOptions =
      options === undefined
        ? {}
        : typeof options === 'string'
        ? { name: options }
        : options

    let extensionConnector
    try {
      extensionConnector = window.__REDUX_DEVTOOLS_EXTENSION__
    } catch {
      // ignored
    }

    if (!extensionConnector) {
      if (__DEV__ && typeof window !== 'undefined') {
        console.warn(
          '[zustand devtools middleware] Please install/enable Redux devtools extension'
        )
      }
      return fn(set, get, api)
    }

    let extension = Object.create(extensionConnector.connect(devtoolsOptions))
    // We're using `Object.defineProperty` to set `prefix`, so if extensionConnector.connect
    // returns the same reference we'd get cannot redefine property prefix error
    // hence we `Object.create` to make a new reference

    let didWarnAboutDevtools = false
    Object.defineProperty(api, 'devtools', {
      get: () => {
        if (!didWarnAboutDevtools) {
          console.warn(
            '[zustand devtools middleware] `devtools` property on the store is deprecated ' +
              'it will be removed in the next major.\n' +
              "You shouldn't interact with the extension directly. But in case you still want to " +
              'you can patch `window.__REDUX_DEVTOOLS_EXTENSION__` directly'
          )
          didWarnAboutDevtools = true
        }
        return extension

Review comment (suggestion):
Not sure why we need `top`. The official '@redux-devtools/extension' doesn't seem to have one.
This is breaking too.

Code after:
    set: CustomSetState,
    get: CustomGetState,
    api: CustomStoreApi &
      StoreApiWithDevtools<S> & {
        dispatch?: unknown
        dispatchFromDevtools?: boolean
      }
  ): S => {
    let didWarnAboutNameDeprecation = false
    if (typeof options === 'string' && !didWarnAboutNameDeprecation) {
      console.warn(
        '[zustand devtools middleware]: passing `name` as directly will be not allowed in next major' +
          'pass the `name` in an object `{ name: ... }` instead'
      )
      didWarnAboutNameDeprecation = true
    }
    const devtoolsOptions =
      options === undefined
        ? {}
        : typeof options === 'string'
        ? { name: options }
        : options

    let extensionConnector: typeof window['__REDUX_DEVTOOLS_EXTENSION__']
    try {
      extensionConnector = window.__REDUX_DEVTOOLS_EXTENSION__
    } catch {
      // ignored
    }

    if (!extensionConnector) {
      if (__DEV__ && typeof window !== 'undefined') {
        console.warn(
          '[zustand devtools middleware] Please install/enable Redux devtools extension'
        )
      }
      return fn(set, get, api)
    }

    let extension = (Object.create as <T>(t: T) => T)(
      extensionConnector.connect(devtoolsOptions)
    )
    // We're using `Object.defineProperty` to set `prefix`, so if extensionConnector.connect
    // returns the same reference we'd get cannot redefine property prefix error
    // hence we `Object.create` to make a new reference

    let didWarnAboutDevtools = false
    Object.defineProperty(api, 'devtools', {
      get: () => {
        if (!didWarnAboutDevtools) {
          console.warn(