Feliz: サードパーティガイド

これは素晴らしい私見に見えます。

ありがとう！ よろしくお願いします：smile：

これは、Material-UIなどのサードパーティのものに拡張するのは簡単ですか？

確かに、差別化された共用体を使用していないため、アプローチは少し異なります。 私は時間が許せば何かを書き込もうとしますが、基本的に2つの選択肢があるという考えです。

• 1） prop静的型をより多くの関数で拡張します
• 2）Muiが必要とするすべてのプロパティを持つ、ライブラリ（おそらくMui ）に固有の同様のprop静的タイプを作成します。 propをMuiでエイリアスし、 MuiをMui固有の（オーバーロードされた）プロパティと関数で拡張することもできます。

拡張は次のように簡単です。

type prop with
  static member hello (value: string) = Interop.mkAttr "hello" value 

これがライブラリの「最終形態」であるかどうか、そしてそれを拡張する方法はまだ検討中です。最初にサードパーティのライブラリを構築して試してみて、どのようになるかを確認したいと思います。

ありがとう！ 私はすでに、MUIのテストを、APIのほんの一部で、それがどのように機能するかを確認するために順調に進んでいます。 おそらく週末/終わりのいつか共有するでしょう、私が軌道に乗っており、フェリスの精神に従っているかどうかを確認するためだけにそれを見ることができれば素晴らしいでしょう。 これまでのところ成功のようです！

ただし、既存のpropタイプは拡張していません。 別の名前空間（ Feliz.MaterialUI ）で別のpropタイプを定義しました。 一見素晴らしい作品です。 もちろん、 FelizとFeliz.MaterialUIの両方を開くと、一致するすべてのタイプのすべてのメンバーにアクセスできます。

Htmlに対応し、実際のコンポーネントを含むタイプMuiがあります。

（現在、＃13で説明したように、コンポーネント固有の小道具をpropの個別のサブモジュールに配置しています。）

Felizで考えられる改善点は、 stringではなくReactElementType $を受け入れるreactElementとcreateElementを用意することです（私は思います）。 createElement (importDefault "@material-ui/core/Button")を呼び出すことができるようにします。 私は現在、これら2つのヘルパーを自分で作成しました。

ちなみに、メンバー全員がinlineである必要がありますか？ 長所/短所は何ですか？ 上記のinlineを使用していないことに気付きましたが、Felizのすべてがinlineです。

ありがとう！ 私はすでに、MUIのテストを、APIのほんの一部で、それがどのように機能するかを確認するために順調に進んでいます。 おそらく週末/終わりのいつか共有するでしょう、私が軌道に乗っており、フェリスの精神に従っているかどうかを確認するためだけにそれを見ることができれば素晴らしいでしょう。 これまでのところ成功のようです！

すごい！ よろしければぜひご覧ください。

ただし、既存のプロップタイプは拡張していません。 別の名前空間（Feliz.MaterialUI）で別のpropタイプを定義しました。 一見素晴らしい作品です。 もちろん、FelizとFeliz.MaterialUIの両方を開くと、一致するすべてのタイプのすべてのメンバーにアクセスできます。

Htmlに対応し、実際のコンポーネントを含むタイプMuiがあります。

それは私がムイのためにすることです

（現在、＃13で説明したように、コンポーネント固有の小道具を小道具の個別のサブモジュールに配置しています。）

あなたが持っているオプションの数のためにそれはMuiにとって理にかなっています

Felizで考えられる改善点は、文字列ではなくReactElementTypeを受け入れるreactElementとcreateElementを用意することです（私は思います）。 createElement（importDefault "@ Material-ui / core / Button"）を呼び出すことができるようにします。 私は現在、これら2つのヘルパーを自分で作成しました。

Interopモジュールで使用しているメンバーを確認しています。ライブラリで使用していたものをすべて公開しましたが、安定版リリースのために再検討されます。

ちなみに、メンバー全員がインラインである必要がありますか？ 長所/短所は何ですか？ 上記でインラインを使用していなかったようですが、Felizのすべてがインラインです。

上記の拡張メンバーをインライン化する必要がありました！

経験則では、プロパティの値がstring / int / bool / enumのようにプリミティブである場合はプロパティをインライン化しますが、プロパティが入力に基づいて値を計算する場合は、ユーザーが毎回インライン化しない方がよいでしょう。インライン関数を呼び出すと、関数本体全体がその呼び出し場所にインライン化されるため、ユーザーがアプリケーション全体で同じ関数を10回使用すると、関数本体は1回定義されて10回参照されるのではなく、インラインで10回コンパイルされます。

経験則では、プロパティの値がstring / int / bool / enumのようにプリミティブである場合はプロパティをインライン化しますが、プロパティが入力に基づいて値を計算する場合は、ユーザーが毎回インライン化しない方がよいでしょう。インライン関数を呼び出すと、関数本体全体がその呼び出し場所にインライン化されるため、ユーザーがアプリケーション全体で同じ関数を10回使用すると、関数本体は1回定義されて10回参照されるのではなく、インラインで10回コンパイルされます。

知っておくといい！ しかし（寓話の文脈では）なぜそもそもインラインなのか？ 「単純な」関数/メソッド本体の利点は何ですか？

• バンドルサイズ：これらの関数が使用されていない場合（およびそれらが数百ある場合）、とにかくコンパイルされ、バンドルサイズAFAIKが膨らみます（もちろん、影響はアプリケーションの合計サイズに比例します）
• ジェネリック型引数：Felizには関係ありませんが、Fableのコンテキストでは、呼び出しの場所がインライン化されていない場合（すべてのジェネリック型引数はコンパイル時に静的に解決される必要があります）、特殊な場合を除いて、ジェネリック型引数を持つジェネリック関数はコンパイルされません。ここで、静的クラスのオプションの引数として[<Inject>] ITypeResolver<'t>を使用できます（高度に専門化されたライブラリのみがこの機能を使用します。Fable.SimpleJson/ Thoth.Jsonを参照してください）

バベルは、プロダクションバンドルを作成するときに、ツリーシェイクを実行し、未使用の機能を削除すると思います。 インライン化はそれを打ち負かします。

@ Luiz-Monadでは、理想的には、Felizの何もインライン化すべきではないと言っていますか？ バンドルサイズの理由によるそのインライン化は逆効果ですか？

@ Luiz-モナドあなたが言っていることは素晴らしいでしょう！ 少なくともコンパイルがそのように機能した場合。 REPLで試すことができる例を次に示します。

module App

type prop = 
  // does useless stuff
  static member f() = 
    [ 1 .. 100 ]
    |> List.map (fun x -> x * 20)
    |> List.collect (fun n -> [n; n])
    |> List.fold (+) 0

  // does useless stuff
  static member inline k() = 
    [ 1 .. 100 ]
    |> List.map (fun x -> x * 20)
    |> List.collect (fun n -> [n; n])
    |> List.fold (+) 0

  static member g() = 1

let value = prop.g()

printfn "%d" value

propに含まれる場所：

• f()には関数本体が含まれています->インライン化されておらず、使用されていません
• k()には関数本体が含まれています->インライン化されていますが使用されていません
• g()には関数が含まれています->インラインではなく使用されています

f()とg()の両方がコンパイルされないと思うかもしれませんが、そうではありません。 f() （インライン化されておらず、使用されていません）はとにかくコンパイルされますが、 k() （インライン化、未使用）はコンパイル済みバンドルに含まれません

import { fold, collect, map, ofSeq, ofArray } from "fable-library/List.js";
import { type } from "fable-library/Reflection.js";
import { rangeNumber } from "fable-library/Seq.js";
import { toConsole, printf } from "fable-library/String.js";
import { declare } from "fable-library/Types.js";
export const prop = declare(function App_prop() {});
export function prop$reflection() {
  return type("App.prop");
}
export function prop$$$f() {
  return fold(function folder(x$$1, y) {
    return x$$1 + y;
  }, 0, collect(function mapping$$1(n) {
    return ofArray([n, n]);
  }, map(function mapping(x) {
    return x * 20;
  }, ofSeq(rangeNumber(1, 1, 100)))));
}
export function prop$$$g() {
  return 1;
}
export const value = prop$$$g();
toConsole(printf("%d"))(value);

それは確かに機能しますが、それを行うにはwebpackを構成する必要があります。これは、ツリーシェーキング自体が寓話ではないため、REPLでは機能しないためです。

前

/// Library.fs
module Library

type prop = 
    // does useless stuff
    static member f() = 
      [ 1 .. 100 ]
      |> List.map (fun x -> x * 20)
      |> List.collect (fun n -> [n; n])
      |> List.fold (+) 0

    // does useless stuff
    static member inline k() = 
      [ 1 .. 100 ]
      |> List.map (fun x -> x * 20)
      |> List.collect (fun n -> [n; n])
      |> List.fold (+) 0


type AppMain =
    static member g() = 1

//// App.fs
module App

let value = Library.AppMain.g ()

printfn "%d" value

後

  declare(function Library_prop() { 
     // see its empty, this weren't removed too because of `keep_classnames: true, keep_fnames: true ` in the terser plugin
  });
  declare(function Library_AppMain() {
  });
  !function toConsole(arg) {
    return arg.cont(function (x) {
      console.log(x)
    })
  }(printf('%d')) (1),
  __webpack_require__.d(__webpack_exports__, 'value', function () {
    return 1
  })

また、テストには注意が必要です。エントリファイルは、関数が削除されないという点で特別なものです。 （静的クラスの初期化と関係があると思います。モジュールに副作用を与えるには、静的初期化コンストラクターを呼び出す必要があります）

このテスト用に作成したこのリポジトリを参照してくださいhttps://github.com/Luiz-Monad/test-tree-shaking

サンプルレポをどうもありがとう！ 私は間違いなくこれをさらに調査して、インライン化が実際にフェリスのコンテキストで何か有用なことをしているのかどうかを確認します

私は間違いなくこれをさらに調査して、インライン化が実際にフェリスのコンテキストで何か有用なことをしているのかどうかを確認します

かっこいい、あなたが見つけたものを聞くのを楽しみにしています:)

すごい！ よろしければぜひご覧ください。

cmeeren / fable-elmish-electron-material-ui-demoのfelizブランチをチェックしてください。

ほとんどのコードは、（HTML）APIドキュメントに基づいて自動生成されます。 ジェネレータープロジェクト（醜くてハッキーですが、仕事は終わります）と実際のバインディング用のプロジェクトがあります。 レンダラープロジェクトでは、 App.fsのみが新しいFelizスタイルのバインディングを使用するように変換されています。

気になったらご覧になり、ご感想やご不明な点がございましたらお知らせください。

@cmeerenは、現在のAPI IMHOよりも非常に見栄えがよく、はるかに優れていますが、それでも少し読みにくいですが、それはライブラリ自体の性質であり、精通している必要のある非常に特殊な部分がたくさんあります。 改善できる部分があると思います。この例を見てください。

Mui.appBar [
  prop.className c.appBar
  prop.appBar.position.fixed'
  prop.children [
    Mui.toolbar [
      prop.children [
        Mui.typography [
          prop.typography.variant.h6
          prop.typography.color.inherit'
          prop.text (pageTitle model.Page)
        ]
      ]
    ]
  ]
]

このスニペットの私の個人的な完璧なバージョンは、それを次のように変換することです。

Mui.appBar [
  AppBar.className c.appBar
  AppBar.position.fixed'
  AppBar.children [
    Mui.toolbar [
      Toolbar.children [
        Mui.typography [
          Typography.variant.h6
          Typography.color.inherit'
          Typygraphy.text (pageTitle model.Page)
        ]
      ]
    ]
  ]
]

このように、Muiを「ドットスルー」するだけで、Mui要素を簡単に見つけることができます。要素（ appBar ）を見つけたら、モジュール名（ AppBar ）を「ドットスルー」できます。プロパティなどを定義する

たぶんAppBarも小文字のままにしてください

あなたはその考えを理解していると思いますが、より正確には、このAPIの一般的な構文は次のとおりです。ここで、 {Element}はreact要素です。

Mui.{element} [
  {Element}.{propName}.{propValue}
  {Element}.children [
    Mui.{otherElem} [
      {OtherElem}.{propName}.{propValue}
      // etc.
    ]
  ]
]

あなたはこのことについてどう思いますか？ このAPIは、具体的な実装を見たい場合に、ライブラリにfabulous-simple-elementsのアイデアを刺激しました。

それは完璧だと思います。あなたの意見を聞きたかったのです。 メインライブラリが機能する方法であるため、最初はすべてをprop未満にすることを選択しましたが、もちろん、実際にはコンポーネント固有のプロップはありませんが、MUIにはコンポーネント固有のプロップしかありません。

小文字のモジュール名に固執するのが最も良いと思います（そして余分なキーストロークを節約します）が、私は反論を受け入れます。

このようなものを自動生成したので、変更が簡単になりました。

更新してお知らせします。

ただ、特に意見を聞きたいことが一つあります。 それはClassNameのものです。 makeStylesフックは、渡されたものと同じ小道具を持つオブジェクトを返しますが、すべての（JSS）要素は、使用するクラス名である文字列に置き換えられています（たとえば、 prop.className ）。

さて、F＃でそれを入力する方法がないので、私は自分が持っているもので作業する必要があります。 通常、スタイルオブジェクトのすべての小道具はIStyleAttribute listです。 これは、 prop.classNameにオーバーロードを追加して、 IStyleAttribute list $を受け入れることができることを意味します。これは、実行時に文字列であるため、もちろん嘘です。 実際にIStyleAttribute listを渡した場合、失敗します。 prop.classNameに加えて、これはすべてのclasses.<element>.<classesName> （ <element>.classes [ ... ]で使用）にも当てはまります。 クラス名（文字列）も受け入れます。

ご覧のとおり、私が行ったことは、スタイルオブジェクトのすべてのIStyleAttribute listプロパティをasClassNameでラップすることを「要求」することです。これは、基本的にIClassNameにボック​​スを解除するだけです。 （必要に応じて、 stringのプロキシ）。 次に、 prop.classNameにオーバーロードを追加してIClassName $を受け入れ、すべてのclassesプロップがIClassNameを受け入れるようにしました。 私はそれがより強く型付けされているのが好きですが、それが余分な型付けを必要とするのは好きではありません（すべてのトップレベルのCSSルールに対してasClassName ）。 あなたがそれを見逃すとコンパイラは文句を言うでしょう、しかしそれはあなたに何をすべきかを教えてくれません、そしてそれはまだ余分なノイズです。

これについて何か意見はありますか？

また、私はこれに気づきました：

f# listItem.divider ((page = Home))

ここでは、二重の括弧が必要です。そうでない場合、F＃は、（存在しない） pageパラメーターをHomeに設定して（$ valueの代わりに）$ listItem.dividerを呼び出そうとしていると解釈します。 valueパラメータがpage = Homeに設定されています）。 それを回避する方法がわかりますか？

こんにちは@cmeeren 、まず第一に、私はこの構文が大好きです：

Mui.appBar [
  prop.className c.appBar
  appBar.position.fixed'
  appBar.children [
    Mui.toolbar [
      toolbar.children [
        Mui.typography [
          typography.variant.h6
          typography.color.inherit'
          prop.text (pageTitle model.Page)
        ]
      ]
    ]
  ]
]

それはとてもきれいでとてもシンプルに見えます！ もし私があなたなら、一般的なprop関数のいくつかを、$＃$ 3 $＃$の代わりに（または一緒に） prop.className appBar.classNameなどのコンポーネント固有の小道具に複製したでしょう。それらはすべて対称に見えますが、より重要なのは、 makeStylesもMui固有であるため、文字列を受け取る一般的なprop.classNameではなく、Mui固有のコンポーネントにIClassNameオーバーロードを与えることです。構築し、Muiコンポーネントにのみ適用されることは理にかなっています。

あなたはmakeStylesに可能な限り最善の方法で取り組んだと思いますが、少なくとも今のところ、これ以上の方法は考えられません（私はasClassNameの大ファンではありませんが、おそらくStyles.createClass代わりに

listItem.divider ((page = Home))に関しては注意が必要ですが、ダミー関数let when (x: bool) = xを追加することもできますが、それは単なるノイズです。 F＃コンパイラが関数の適切なオーバーロードを解決できない理由がわからないため、コンパイラのバグとして報告するのが最善だと思います。自分で試したことはありませんが、時間が許せば調べます。

最後に、今週は休暇中なのでいつものように反応がないので、すべてを読んだりチェックしたりできないかもしれません。

もし私があなたなら、一般的なprop関数のいくつかを、$＃$ 2 $＃$の代わりに（または一緒に） prop.className appBar.classNameなどのコンポーネント固有の小道具に複製したでしょう。それらはすべて対称に見えますが、より重要なのは、 makeStylesもMui固有であるため、文字列を受け取る一般的なprop.classNameではなく、Mui固有のコンポーネントにIClassNameオーバーロードを与えることです。構築し、Muiコンポーネントにのみ適用されることは理にかなっています。

今すぐチェックしてください:)私は過去数日間に大幅な改善と拡張を行い、それらをプッシュしただけです（まだ行われていません。現在、生成された小道具を検証して改善するためにすべてのMUIコンポーネントを調べています）。

あなたはmakeStylesに可能な限り最善の方法で取り組んだと思いますが、少なくとも今のところ、これ以上の方法は考えられません（私はasClassNameの大ファンではありませんが、おそらくStyles.createClass代わりに

よく使われるのでなるべく短くしたいのですが、他の名前でも構いません。 私はIStyleAttribute listの過負荷を抱えるだけの心の半分を持っていますが。 それは潜在的にかなりのノイズを取り除くでしょう、そしてそれが技術的に間違って使われることができたとしてもそれが非常に危険であるとは思えません。

listItem.divider ((page = Home))に関しては注意が必要ですが、ダミー関数let when (x: bool) = xを追加することもできますが、それは単なるノイズです。 F＃コンパイラが関数の適切なオーバーロードを解決できない理由がわからないため、コンパイラのバグとして報告するのが最善だと思います。自分で試したことはありませんが、時間が許せば調べます。

おかげで、私は今問題を提出しました： https ://github.com/dotnet/fsharp/issues/7423

最後に、今週は休暇中なのでいつものように反応がないので、すべてを読んだりチェックしたりできないかもしれません。

了解しました。問題ありません。 私が何かに出くわした場合、私は問題を投稿し続けます、そしてあなたはあなた自身の時間にただ答えます。

今すぐチェックしてください:)私は過去数日間に大幅な改善と拡張を行い、それらをプッシュしただけです（まだ行われていません。現在、生成された小道具を検証して改善するためにすべてのMUIコンポーネントを調べています）。

生成されたドキュメントもあり、本当に良さそうです😍独自のリポジトリを配置する時間かもしれませんか？

よく使われるのでなるべく短くしたいのですが、他の名前でも構いません。 IStyleAttributeリストをオーバーロードするだけでいいのですが。 それは潜在的にかなりのノイズを取り除くでしょう、そしてそれが技術的に間違って使われることができたとしてもそれが非常に危険であるとは思えません。

それもうまくいくでしょう、寓話ライブラリは常に型システムをだまします;）

おかげで、私は今問題を提出しました：dotnet / fsharp＃7423

素晴らしい！ どうもありがとう

生成されたドキュメントもあり、本当に良さそうです😍独自のリポジトリを配置する時間かもしれませんか？

私はそれについて考えていましたが、まだいくつかの重要なバグがあります（例：＃27）すべてを同じ場所に置くという便利さで理解したいので、準備ができるまでそこに置いておくと思いますnugetのプレリリース用（長すぎないことを願っています）。

@Zaid-Ajaj私はFeliz.MaterialUIをほぼ完成させました。 間もなく別のリポジトリに公開されます。 何よりもまず、いくつかの設計上の決定をチェックし、Felizとの一貫性を確認するだけでなく、いくつかの実装のものもチェックしてもらうのは素晴らしいことです（たとえば、内部で作成するものを使用していますか、それとも私が持っているものがありますか？ Felizからは使用していませんが、使用する必要があります）。

新しいレポを作成するときに、レビューしたい内容を説明する問題を作成してタグを付けても大丈夫ですか？

Feliz.MaterialUIのドラフトをcmeeren/Feliz.MaterialUIにアップロードしました。 レビューしたいことに関していくつかの問題を作成しました。

ご覧いただければ幸いです！

各問題に多くの時間を費やす必要はありません。 以前のコメントで述べた理由から、セカンドオピニオンが欲しいだけです。 よろしければ雑草の中に入ってよかったですが、「これでいい」だけでもいいですね。

もちろん、急ぐ必要はありません。 :)

素晴らしい仕事@cmeeren！ 一見すると、バインディングは非常にきれいに見えます。今後数日で各問題を見ていきます。：smile：を約束します。

おい！ 問題を引き続き検討する機会はありますか？ 繰り返しますが、急いでいません。数週間あなたから連絡がないので、フレンドリーなリマインダーです😃

私は実際に問題を調べましたが、前に述べたように、APIが優れているかどうかはユースケースに由来するため、試してみるためにアルファ版を公開するように依頼しましたが、まだ持っていません。時間はまだそうです（今週は私の心の奥底にありました：smile :)

こんにちは@cmeeren 、私たちはこれが解決されたと考えることができると思いますよね？ 問題をクローズします。必要に応じて、もう一度開いてさらに議論してください。