avoid reference errors when dynamically loading hooks after create ho…

[infiton]

Users have run into issues of production builds of their application when after initial react router page load they navigate to a route which imports a new hook. A fix for this was added in #926 however it seems in many cases this leads to a ReferenceError: Cannot access 'useFindFirst' before initialization

This is due to something I just learned today had a name temporary dead zone

The issue is that when we i.e. import { useFindFirst } from "@gadgetinc/react" when the react provider has been set up BUT none of the hook modules have been imported we end effectively running this code:

let useFindFirst = createHookStub("useFindFirst", () => {
  useFindFirst = () => { ... }
})

this immediately invokes the inner function in the block that is defining useFindFirst and this tries to assign to useFindFirst which is in the TDZ

the fix is to keep the exported useFindFirst binding stable and have createHookStub update an internal impl variable, rather than doing useFindFirst = … inside the initializer.

PR Checklist

• Important or complicated code is tested
• Any user facing changes are documented in the Gadget-side changelog
• Any immediate changes are slated for release in Gadget via a generated package dependency bump
• Versions within this monorepo are matching and there's a valid upgrade path

[infiton]

verified on my reproduction app that using the patch versions from #934 fixed the issue

[airhorns]

Crap, thanks for fixing this, this makes sense.

[airhorns]

Dunno if you particularly care, but you could make createHookStub not actually do any variable rebinding in each module, and instead do it internally. Like:

const useAction: UseAction = createHookStub("useAction", (adapter, coreHooks) => {
  return (action, options) => {
    ...
  }
}

and then

const createHookStub = (factory) => {
  let resultFn;
  if (immediate) {
     resultFn = factory(....)
  } else {
     let impl;
     resultFn = (...args) => {
         if (impl) {
            return impl(...args);
        } else {
           throw
        }  
     }
     
     onGivenFactory(() => {
        impl = factory()
     });
  }
  return resultFn;
}

or some such

[infiton]

yah that was one of the options that I explored with cursor; opus suggested the option in this PR was

My Recommendation: Pattern 1 (Internal Impl + Wrapper)
Pattern 1 is the cleanest and requires minimal changes: