fix: improve feat/transitions type

[Talent30]

@franky47
Re: #406 (comment)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-usequerystate	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2023 0:21am

[franky47]

That's a very interesting approach!

suggestion: We could use better descriptive names for generic types than B and S (S stands for Shallow I guess, but is B for Boolean?)

issue: The end-to-end test bench fails to compile (run with pnpm test):

e2e:build: Failed to compile.
e2e:build: 
e2e:build: ./src/pages/pages/useQueryState/index.tsx:40:43
e2e:build: Type error: Type 'false' is not assignable to type 'undefined'.
e2e:build: 
e2e:build:   38 |         <button
e2e:build:   39 |           id="string_set_a"
e2e:build: > 40 |           onClick={() => setString('a', { shallow: false })}
e2e:build:      |                                           ^
e2e:build:   41 |         >
e2e:build:   42 |           Set A
e2e:build:   43 |         </button>

[Talent30]

That's a very interesting approach!

suggestion: We could use better descriptive names for generic types than B and S (S stands for Shallow I guess, but is B for Boolean?)

issue: The end-to-end test bench fails to compile (run with pnpm test):

e2e:build: Failed to compile.
e2e:build: 
e2e:build: ./src/pages/pages/useQueryState/index.tsx:40:43
e2e:build: Type error: Type 'false' is not assignable to type 'undefined'.
e2e:build: 
e2e:build:   38 |         <button
e2e:build:   39 |           id="string_set_a"
e2e:build: > 40 |           onClick={() => setString('a', { shallow: false })}
e2e:build:      |                                           ^
e2e:build:   41 |         >
e2e:build:   42 |           Set A
e2e:build:   43 |         </button>

Any way to get around it in TS? Sorry my brain is not functioning...
Update: build passed, back to bed...

function Test() {
  const [state, setName] = useQueryState('name')
  const [isLoading, startTransition] = React.useTransition()

  return (
    <>
      {/* failed Type '{}' is not assignable to type 'boolean | undefined'. */}
      <button
        id="string_set_a"
        onClick={() =>
          setName('a', {
            shallow: {}
          })
        }
      >
        Set A
      </button>
      {/* failed Type 'TransitionStartFunction' is not assignable to type 'undefined'.ts(2322)
       */}
      <button
        id="string_set_a"
        onClick={() =>
          setName('a', { shallow: true, startTransition: startTransition })
        }
      >
        Set A
      </button>
      <button
        id="string_set_a"
        onClick={() =>
          setName('a', { shallow: false, startTransition: startTransition })
        }
      >
        Set A
      </button>
      <button
        id="string_set_a"
        onClick={() => setName('a', { shallow: false })}
      >
        Set A
      </button>
      <button
        id="string_set_a"
        onClick={() => setName('a', { startTransition: startTransition })}
      >
        Set A
      </button>
    </>
  )
}

[Talent30]

I don't think it is going to be feasible.

Update:
This is my initial approach.

Typescript is not omnipotent; you must admit the unknowability of shallow option to Typescript before processing it through type exclusion logic. I think we can’t pass all the tests without introducing unknown because typescript doesn't check if boolean is true or false.

Update:
I am wrong, you can do it without unknown but you need to and extends boolean everywhere. Still don't think put it into the generics definition would work

Update:
I am wrong, forgot to build before running the test...

[Talent30]

@franky47 This is the best I can do. Please approve this PR if you are happy with it.

[franky47]

praise: Great job! 👏

There are many corner cases where we could end up, like chaining withOptions, or overriding hook-level options with call-level ones, but I realised that the type for the Options object still make sense to be boolean | undefined and React.TransitionStartFunction | undefined, as the setting of shallow: false when passing a startTransition is not done when defining options, but when they get merged when applied to the URL queue.