Swiftのような反応:我々はそうすることができますか?我々は?

⚠️ これは明らかに生産のためのものではない実験です.
Swiftuiで数日間、私はその構文と
私がこのように反応することができるかどうか見たかったです.おそらく、不合理な考えが、理由.
次のようになりました.

const SandwichItem = (sandwich: Sandwich) =>
  HStack(
    Image(sandwich.thumbnailName)
      .rounded(8),

    VStack(
      Text(sandwich.name)
        .as('h2')
        .variant('title'),
      Text(`${sandwich.ingredientCount} ingredients`)
        .as('small')
        .variant('subtitle'),
    ),
  )
    .alignment('center')
    .spacing('medium')

render(root, List(sandwiches, SandwichItem))

比較するには、これはJSXのようになります.

const SandwichItem = ({ sandwich }: SandwichItemProps) => (
  <HStack alignment="center" spacing="medium">
    <Image src={sandwich.thumbnailName} cornerRadius={8} />

    <VStack>
      <Text as="h2" variant="title">
        {sandwich.name}
      </Text>
      <Text as="small" variant="subtitle">
        {sandwich.ingredientCount} ingredients
      </Text>
    </VStack>
  </HStack>
)

render(
  root,
  <List
    items={sandwiches}
    renderItem={(sandwich) => <SandwichItem sandwich={sandwich} />}
  />,
)

構文は主観的です.あなたのうちの何人かは、もう一方の方を好むでしょう
様々な理由.個人的な好みに加えて、いくつかのことがこの構文に目立ちます.

これは、関数呼び出しの構成、何もJavascriptの上にあります.

コンポーネントは引数として必須入力を取ります.

変更は、修飾子と呼ばれる連鎖関数を通して行われます.

特に、入力と修飾子の分離が好きです.JSXでは両方とも小道具です.

Text('Professional photographer')
  .variant('subtitle')
  .color('muted')

入力は、Aのような原始的なタイプでありえましたstring またはコンポーネントの配列のようなオブジェクト型.

VStack(
  Text('Your Messages').variant('title'),
  Text(`${unread} messages`).variant('subtitle'),
)

多型，連鎖可能修飾子

修飾子は関数です.それらをおもしろくするのは、それらが複数のコンポーネントによって共有され、独立して実装されることである.

Text(/*...*/)
  .color('muted')

HStack(/*...*/)
  .color('muted')
  .align('start')
  .spacing('gutter')

AutoGrid(/*...*/)
  .minWidth(360)
  .spacing('small')

では、いくつかの修飾子の実装を見ましょう.

// Colorable.ts
export interface Colorable extends JSX.Element {
  color: <T extends Colorable>(this: T, color: string) => T
}

export function color<T extends Colorable>(this: T, color: string) {
  const style = {
    ...this.props.style,
    color,
  }

  this.props = {
    ...this.props,
    style,
  }

  return this
}

// Fontable.ts
type Font = keyof typeof fontVariants

export interface Fontable extends JSX.Element {
  font: <T extends Fontable>(this: T, font: Font) => T
}

export function font<T extends Fontable>(this: T, font: Font) {
  const style = {
    ...this.props.style,
    ...fontVariants[font],
  }

  this.props = {
    ...this.props,
    style,
  }

  return this
}

コンポーネントは、これらの特性を実装することができます

// Text.tsx
import { Fontable, font } from '@modifiers/Fontable'
import { Colorable, color } from '@modifiers/Colorable'

export default function Text(text: string): Fontable & Colorable {
  const element = <span>{text}</span>

  return {
    ...element,
    font,
    color,
  }
}

また、コンポーネントを呼び出すこともできます.

Text('Hello, world!')
  .font('title')
  .color('hotpink')

コンポーネントは複数の修飾子を実装できます.また、修飾子を多くの構成要素によって実装することができます.
ℹ️ より多くのコンポーネントと修飾子を見ることができますhttps://github.com/nayaabkhan/swift-react .

問題

私が気がつかなかったのは、それが働かないことだ.非常に可能性が高い、より多くある.

usonontextが動作しません.でも<Context.Consumer /> うまくいきます.

反応の開発ツールは、検査官のコンポーネントが表示されません.

私は、我々が我々がJSXを使用しないので、反応が我々の構成要素を特定することができないので、これがあると思いますcreateElement 作成時.あなたがより多くの問題を見つけるならば、コメントで彼らを報告してください.そして、あなたが仕事を知っているならば、彼らは非常に歓迎です.

でもどうして？

最後に、部屋の象に話しかけましょう.なぜ、このすべてのトラブル?
たぶん私bike shedding . しかし、実験と誰とでも共有する知っている唯一の方法です.これは他人と共鳴して、物になるのだろう.または悪いアイデアの瓦礫に埋葬されます.誰が知っているが、それは私が持っていた楽しみのために価値があった.
私は素晴らしい方法オーサリングこのように反応した.おそらく、この種の統語的変化は予期しないが、役に立つ影響を及ぼすかもしれない.

コンポーネントAPIデザイナが予期した入力タイプの非常に特定であるのを許容してください.例えば、Text どんな種類のreactNodeの代わりにもストリングまたはMarkdownを受け入れます.

修飾子を使用して、その実装と一緒に共通APIを共有することを容易にします.

のような高水準構文を導入するIdentifiers .

スワップは、ライブラリのユーザーに影響を与えることなく何か他のものと反応します.

閉じるこの動画はお気に入りから削除されていますtry it out on CodeSandbox , 楽しく、あなたの考えを共有する.
今度まで👋.