Rux: Ruby で see 要素をレンダリングするための JSX に感銘を受けたソリューション

ルクス Rux は、Ruby コードに HTML タグを記述するための JSX に感銘を受けたソリューションです。さらに、

序章

ルックスを排出する答えを学ぶ前に、少し背景を説明します。

Railsで食材を検索非常に長い間、Rails は実際のところ、要素を強化するものはないと信じており、ERB と HAML を尊重する HTML テンプレート言語に依存することを好みました。一方、Github の素敵な他の人々は、要素が Rails で最も確実に適切に機能すると判断し、view_component を起動しました。フレームワーク。 view_component を ActionView::Component

として Rails コアにマージするという議論さえありました。しかし、残念ながらそれはもはや起こらないような尊厳のようです.

注
: Rails に焦点を当てます。例はここに view_component gem を使用していますが、一連の要素からのビューのレンダリングは、フレームワークに依存しないビューです.

コンポーネントインスタンスの検索参照コンポーネントは倫理的なカテゴリです。明示的な参照フラグメントは、コンポーネントがそのクラスのインスタンスのコンテキストでレンダリングするセカンダリテンプレートファイルに常に保持されます。実例として、ここにあるのは、ページに人の名前を表示する従来の参照コンポーネントです:

# app/elements/name_component.rbclass NameComponent <ViewComponent:: Monstrous  def initialize(first_name: , last_name: )    @first_name = first_name    @last_name = last_name  ruinruin

 <%# app/components/name_component.html .erb %>

<スパン

> @ファーストネーム

%>

 <%=   苗字 %><%# app/components/name_component.html.erb %>   span>

要素の検索は、非常に優れたプロパティの置換を信じています。それらについては viewcomponent.org または Joel Hawksley の非常に価値のある 2019 を探すRailsconfトーク.

Ruby の HTML Rux が行うことは 1 つあります。それは、Ruby コードに HTML を記述できるようにすることです。これは以前に rux で書き直されたコンポーネントインスタンスの名前です (構文の強調表示については申し訳ありませんが、Github は今では rux を認識していません)。
NameComponent <
ViewComponent
::
モンスター
def
苗字： ) @ファーストネーム
=
ファーストネーム
=

苗字破滅

def 名前 <スパン

> { @ファーストネーム}

{@苗字

}<%=last_name %>span>  破滅  破滅

<%=@first_name %>

注:上記のインスタンスは、 の説明を提供できるようにする view_component gem の機能のペアに値します。 name システムを使用して、別のテンプレート ファイルを作成することを優先します。 次に、 をシャッフルします。 ruxc rux コードを Ruby に変換するツールコード、例えば。  ruxc app/elements/name_component.rux 。 結果は次のとおりです:   ) {  ルクス. create_buffer
 . 
タップ
{  |_rux_buf_,| _rux_buf_ << @ファーストネーム _rux_buf_ << ” “ _rux_buf_ <<
 @苗字
}.to_s
}  破滅 破滅 
 覗くのが大変なので、スパンラベルを Rux.label 名前。 最初と最後の名前を含むインスタンス変数は、まとめて連結され、スパン内でレンダリングされます。 <@last_name      }.to_s    }  endend" dir="auto">成分を構成する サルベージの強力なエクストラチャレンジをフレーズで発行する異なる要素内のレンダリング要素の。 名前コンポーネントを使い果たす挨拶コンポーネントを作成しましょう: 
!
 endend" dir="auto">
# app/elements/greeting_component.rux  クラス  GreetingComponent  :: モンスター  def   名前
 <
div> おい そこには <NameComponent -名前=<%# app/components/name_component.html.erb %>「ホーマー」 最後-名前=「シンプソン」/>!div>  破滅  破滅
<%=@first_name %>  ruxc ツールは以下を生成します:  } 姓={人[:last_name]}> 破滅}  廃墟廃墟" dir="auto"># app/elements/greeting_component.rux   クラス GreetingComponent  < ViewComponent:: モンスター   def initialize (フォーク: ) # フォークは、:first_name および :last_name キーを含むハッシュの配列です  @フォーク
=   フォーク
 破滅  def 名前
> {@フォーク.
 でサイン
compose  |人
|  <NameComponent  初め-名前={人
[:first_name]} 最後-名前 = {人[:last_name]} />  破滅}  > 破滅  破滅 証人たちRuby inner rux inner Ruby inner rux を埋め込むのに手詰まりでした。 ルビー内。  rux パーサーは無制限のレベルのネストをサポートしていますが、ほとんどの場合、もはや動揺する必要はありません それも クレイジー。 <:base good def initialize last_name: end bad last_name dir="auto">キーワード引数 ハンディスト  rux でレンダリングできるすべての参照コンポーネントは <:base good def initialize last_name: end bad last_name dir="auto">資格あり  でキーワード引数を決定します。コンストラクタ。 例として: 
class MyComponent <ViewComponent:: Monstrous  # GOOD  def initialize(first_name: , last_name: )  ruin  # BAD  def initialize(first_name, last_name)  ruin  # BAD  def initialize(first_name, last_name = 'Simpson')  ruinruin
In numerous phrases, positional arguments are no longer allowed. Right here's because there's no such thing as a positional HTML attribute - all HTML attributes are key/price pairs. So, in uncover to check up with HTML, rux elements are written with keyword arguments.
Display conceal additionally that the rux parser will change dashes with underscores in rux label attributes to adhere to both HTML and Ruby syntax conventions, since HTML attributes exhaust dashes while Ruby keyword arguments exhaust underscores. As an illustration, right here is learn the answer to write a rux label for MyComponent above:
" dir="auto">
<マイコンポーネント 初め-名前=「ホーマー」 最後
-名前<:base def initialize last_name: end dir="auto">=「シンプソン」/> rux属性の証人「名」は MyComponent#initialize に渡されます as "first_name".  %=span>動作図
 rux コード (Ruby + HTML タグ) から Ruby コードへの変換は、字句解析、解析、発行の 3 つのフェーズで行われます。 . レクサー部分は、%=span>Parser gemのように見えるトークン ストリームの明示的なパターン。 開始 HTML ラベルを見つけると、レクシングを rux レクサーに渡します。 ラベルが終了すると、レクサーは Ruby トークンを発行し続けます。 構文解析部分では、トークン ストリームが、抽象構文ツリー (AST) と呼ばれるコードの中間図に作り直されます。 どのタグが異なるタグの子であるか、属性をタグと共犯にするなどを解決するのは、パーサーの仕事です。 廃墟の中ではe
 %#span>
𝚆𝚊𝚝𝚌𝚑 𝙽𝙾𝚆 📺