epicweb-dev / client-hints Goto Github PK

Hello!

I have a project using epic-stack and I decided to apply the same changes as epicweb-dev/epic-stack@d312d7b and epicweb-dev/epic-stack@ae3f66a to start using @epic-web/client-hints.

However, upon doing the change, @typescript-eslint started to complain about unsafe assignments due to hints being of type any, even though VSCode is saying getHints returns ClientHintsValue<Hints>.

The difference to the pre-@epic-web/client-hints usage is that getHints used to return a simple object:

Looking into getHints, the implementation is the same in both versions, but what changes are the type definitions:
Before

{
      [name in ClientHintNames]: (typeof clientHints)[name] extends {
        transform: (value: string) => infer ReturnValue;
      }
        ? ReturnValue
        : (typeof clientHints)[name]["fallback"];
},

After

Hints extends Record<string, ClientHint<any>>

After a lot of searching, I think this is the same issue as reported by Kent here: sindresorhus/type-fest#667
The referenced workaround is to change from any to unknown but I'm not sure if that's enough, as I tried to manually change the .d.ts file in node_modules and it didn't work.

How to reproduce

1. Create a new project using epic-stack: npx create-epic-app@latest
2. Add some reference to requestInfo.hints in app/utils/request-info.ts, such as console.log(data.requestInfo.hints)
3. hints is recognized as any in VSCode even though it has the correct type passed into JsonifyObject

Related: epicweb-dev/epic-stack#580 (comment)

I had migrated from a simple stack on Vercel to the Epic Stack on Fly (❤️ love it) and had assumed I had some redirect breaking channel attribution in GA and spun out on that for a while.

Last week I was looking thru the client hints code and had an A-ha seeing the window.location.reload(); in there. A page reload sets the page referrer to the current page and since client-hinds runs inline at the top of the document, it runs before any analytics does. In the chart below you can see my direct traffic goes to normal levels after I removed the client hint code.

For my site, assuming many others, understanding attribution as accurately as possible is important for verifying success of paid campaigns, social media, emails etc. We should probably document this trade-off and maybe offer some sort of opt-in or manual handle of reload on cookie diff to preserve referrer?

I saw a warning about this being an issue in Firefox

Sorry for opening an issue for this, it's not really an issue. I didn't find the discussions tab, so I created this issue to ask if you're open to adding more hints. If you are, then I'd like to contribute one for the user's locale.

That's necessary for full compatibility with ESM in TypeScript when using "moduleResolution": "NodeNext".

When the import doesn't have the extension, TypeScript can't properly resolve it:

After I manually add the extension, you can see now it resolves correctly:

TypeScript doesn't modify the paths used in the imports when compiling, so it's really a matter of adding the extension to all imports in the source code.