elm-shiori v0.3.0

elm-shiori

カードゲームのUI確認用に作りました。

インストール

npm i -D elm-shiori

使い方

1. 準備

• プロジェクトルートで事前にelm/urlをインストールしておいてください

• shiori.jsonをプロジェクトルートに用意してください

  例:

  {
      "roots": ["src"],
      "assets": "public",
      "files": [
          "Shape",
          "Button",
          "Image",
          "Pages.Home_",
          "Pages.Login.Home_"
      ]
  }

2. 初回はnpx shiori initを実行

3. プロジェクトに合わせてshiori/Shiori_View.elmを編集してください

   例: elm-ui

   import Html exposing (Html)
   import Element exposing (Element, layout)

map : List (Element msg) -> List (Html ())
map =
    List.map (layout [] >> Html.map (always ()))
```

4. shiori/index.htmlを編集し任意のCSSを読み込ませてください

5. npx shiori serveで起動

• ブラウザで http://localhost:3000 にアクセス
• 気が向いたらport番号変更できるようにする予定

コメントの書き方

単体

{-|

    <shiori> button

-}
button : Html Msg
button =
    div []
        [ Html.button [ onClick Sample ] [ text "button" ]
        ]

引数有りの場合

{-|

    <shiori> button "World"

-}
button : String -> Html Msg
button str =
    div []
        [ Html.button [ onClick Sample ] [ text <| "Hello " ++ str ]
        ]

複数

{-|

    <shiori> button "World"

    <shiori> button "World2"

-}
button : String -> Html Msg
button str =
    div []
        [ Html.button [ onClick Sample ] [ text <| "Hello " ++ str ]
        ]

import

{-|

    import Html exposing (div)

    <shiori> div [] <| .body <| view { world = "world" }

-}
view : Model -> { title : String, body : List (Html Msg) }
view model =
    { title = "home"
    , body = [ text <| "hello " ++ model.world ]
    }

複数行

• 現状非対応です。1行で書き切ってください。
• 気が向いたら対応します。

CLI

npx shiori init
npx shiori build
npx shiori serve

ライセンス

• MIT license
• 一部elm-codegenで生成されたコードを含みます