new hook API

[lstkz]

I suggested the same thing in styled-components.

Example syntax:

interface FooProps {
  title: string;
  description: string;
  bold: boolean;
}

function Foo(props: FooProps) {
  const { title, bold, description } = props;

  const theme = useTheme();

  const Wrapper = useStyled.div`
    padding: 10px;
  `;

  const Title = useStyled.h1`
    color: ${theme.primary};
    font-weight: ${bold ? 'bolder' : 'normal'};
    font-size: 18px;
  `;

  const Description = useStyled.div`
    font-weight: ${bold ? 'bold' : 'normal'};
    font-size: 12px;
  `;

  return (
    <Wrapper>
      <Title>{title}</Title>
      <Description>{description}</Description>
    </Wrapper>
  );
}

The main idea is to have a friendly syntax for Typescript. Sometimes, adding annotations for every props: MyCompProps can be overwhelming.

[SimenB]

#967

[Andarist]

We believe that for this very reason (among other reasons as well) styled abstraction just comes to its limitations and that's why we prefer to use jsx pragma, css prop etc. When you have all of this in your render function it just removes problems such as this.

Refactoring your example to css prop would like this:

/** @jsx jsx */
import { jsx, css } from '@emotion/core'
import { useTheme } from 'emotion-theming'

interface FooProps {
  title: string;
  description: string;
  bold: boolean;
}

function Foo(props: FooProps) {
  const { title, bold, description } = props;

  const theme = useTheme();

  const wrapperCss = css`
    padding: 10px;
  `;

  const titleCss = css`
    color: ${theme.primary};
    font-weight: ${bold ? 'bolder' : 'normal'};
    font-size: 18px;
  `;

  const descriptionCss = css`
    font-weight: ${bold ? 'bold' : 'normal'};
    font-size: 12px;
  `;

  return (
    <div css={wrapperCss}>
      <h1 css={titleCss}>{title}</h1>
      <div css={descriptionCss}>{description}</div>
    </div>
  );
}

Just look at how it looks practically the same.

I believe this is what resolves this issue, we don't plan to introduce any styled-based hooks. A custom babel transform could be created to support such syntax - but this is up to you.