HSX - mrsekut-p

HSX

from IHP

Haskell内に書くJSXのようなやつ

コンパイル時にHaskellコードになる

内部でblaze-htmlを使っているっぽい

HSXがcompilerされてBlazeのコードになるのかな #??

{}で囲んで中にHaskell式を書ける

型チェックが効く

タグ名が間違っていたり、閉じタグがなかったり、属性名が間違っているとエラー

例えば、aタグのhrefをhreのようにtypoするとエラー

{}の中のHaskell式が間違っていてもエラー

例

code:hs

data NewView = NewView

{ comment :: Comment

, post :: Post

}

instance View NewView where

html NewView { .. } = [hsx|

{breadcrumb}

<h1>New Comment</h1>

{renderForm comment}

|]

where

breadcrumb = renderBreadcrumb

[ breadcrumbLink "Comments" CommentsAction

, breadcrumbText "New Comment"

]

renderForm :: Comment -> Html

renderForm comment = formFor comment [hsx|

{(textField #postId)}

{(textField #author)}

{(textField #body)}

{submitButton}

|]

雑に見れば、Reactの1つのComponentと大差ない

上部で定義しているNewView型がpropsの型のようなもの

renderFormは、componentを定義していると見れる

Spread Values

docsにこれが書けると書いてるが、書くとエラーになる

code:hsx

<div { ... ("data-my-attribute", "Hello World!") } />

なんでやmrsekut.icon

issue出したら対応してもろたmrsekut.icon

VSCode拡張がある

https://marketplace.visualstudio.com/items?itemName=s0kil.vscode-hsx

copilotが優先されるので、Emmetを上手く展開できないなmrsekut.icon

キー変更したらできると思うけど、そこまで重要でもないので保留

hrefにDBのデータをそのままgetで入れるとなんかへんになる

なんか別の方法がありそう

<a href="{get #link feed}">こうできない

<a href={get #link feed}>こうか