Skip to content

Commit

Permalink
Permit observables as values in style objects in Typescript + JSX
Browse files Browse the repository at this point in the history
This fixes a mismatch between the currently exposed JSX typings and
the API for style values. For example,

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

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

is now permitted in the Typescript types for JSX, where it wasn't
before.
  • Loading branch information
lynlevenick committed Jul 7, 2020
1 parent 4befba0 commit ab1ec83
Showing 1 changed file with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions packages/sinuous/jsx.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Observable } from './observable/src';

export namespace JSXInternal {
type AllowObservable<Props> = { [K in keyof Props]: Props[K] | Observable<Props[K]> }
type OrObservable<T> = T | Observable<T>
type AllowObservable<Props> = { [K in keyof Props]: OrObservable<Props[K]> }

interface Element extends HTMLElement { }

Expand Down Expand Up @@ -695,7 +696,9 @@ export namespace JSXInternal {
srcSet?: string;
start?: number;
step?: number | string;
style?: string | { [key: string]: string | number };
style?:
| string
| { [key: string]: OrObservable<string | number> };
summary?: string;
tabIndex?: number;
target?: string;
Expand Down

0 comments on commit ab1ec83

Please sign in to comment.