Permit observables as values in style objects in Typescript + JSX

[lynlevenick]

This fixes a mismatch between the currently exposed JSX typings and the API for style values. For example,

function Blink() {
  const hidden = observable(false);
  setInterval(() => hidden(!hidden()), 1000);

  return (
    <span style={{
      visibility: () => hidden() ? 'visible' : 'hidden'
    }}>
      blink tag?
    </span>
  );
}

is now permitted, where it wasn't before.

If there are other values which allow this nested-observable behavior, then those might need to be adjusted as well.

[codecov]

Codecov Report

Merging #123 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #123   +/-   ##
=======================================
  Coverage   97.31%   97.31%           
=======================================
  Files          21       21           
  Lines         597      597           
=======================================
  Hits          581      581           
  Misses         16       16           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4befba0...9a3e91f. Read the comment docs.

[luwes]

thanks for this PR @lynlevenick , will review soon!

[nettyso]

Nice catch. Happy to see someone else uses TS for Sinuous 💯

I thought it might work as a declaration merge (like in https://github.com/luwes/sinuous/blob/master/packages/sinuous/src/index.d.ts#L12) but it doesn't actually work:

declare module 'sinuous/jsx' {
  namespace JSXInternal {
    interface DOMAttributes<Target extends EventTarget> {
      children?: ElementChildren;
    }
    interface _HTMLAttributes<RefType extends EventTarget = EventTarget>
      extends DOMAttributes<RefType> {
      style?: string | { [key: string]: string | number | Observable<string | number> };
    }
  }
}

Since it's an overwrite not an extension to an interface Typescript throws. Which is sucks because jsx.d.ts is a really long file and no one going to read the whole thing to figure out what little tweaks were changed in it. In general it's nice to keep it vanilla but I think this is a necessary evil in this case 👍

[lynlevenick]

@heyheyhello I also considered something like:

type OrObservable<T> = T | Observable<T>
type ApplyInnerObservables<T> = T extends { [key: string]: any }
  ? { [K in keyof T]: OrObservable<T[K]> }
  : T
type AllowObservable<Props> = {
  [K in keyof Props]: OrObservable<ApplyInnerObservables<Props[K]>>
}

which detects the object in style and does effectively what I did here, but I thought that might be too much magic for one property.

[luwes]

LGTM! thank you for the contribution 🙌