TheBejbiborn•12mo ago

Declaration merging for external packages

Hi! I'm using unoCSS with Deno Fresh and have been attempting to use the attributify preset (https://unocss.dev/presets/attributify#preact). However for the type inference to work this preset requires to override preact's JSXInternal namespace declaration (which I think is quite a popular pattern with frontend / fullstack frameworks) and I can't quite get how to do it in Deno (and if it's even possible). Tl;DR How can one do the following in Deno?

declare module 'preact' {
  namespace JSX {
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

declare module 'preact' {
  namespace JSX {
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

UnoCSS

The instant on-demand Atomic CSS engine

4 Replies

marvinh.•12mo ago

Do you have a repo to play with? Would love to take a look

TheBejbiborn•12mo ago

I'm not sure if there is a need for any particular setup / repo to test this. It's not even that strictly related to Fresh, I think it's a generic topic (declaration merging with namespaces declared by external packages). I think you can start a new empty Fresh project with deno run -A -r https://fresh.deno.dev and just try to override preact's JSXInternal namespace with anything.

marvinh.•12mo ago

I've had the need to add new attributes to DOM elements in JSX in this PR https://github.com/denoland/fresh/pull/1532/files#diff-57f52880cb65e10f7786f9329753db959231602f3a292ff85c396997b6123ebaR22-R28 Does that work with uno? (haven't used uno in the past, so no idea)

TheBejbiborn•12mo ago

That works actually! Thanks! Leaving the snippet for anybody who finds this thread:

declare global {
  namespace preact.createElement.JSX {
    // deno-lint-ignore no-empty-interface
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

declare global {
  namespace preact.createElement.JSX {
    // deno-lint-ignore no-empty-interface
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

I keep this in my uno.config.ts for convenience. To make this thread more generic for module augumentation (not strictly preact / deno fresh) could you explain how did you get to the preact.createElement.JSX? (for anybody looking for the module augumentation typescript docs: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)