Feliz: वैकल्पिक धाराप्रवाह वाक्य रचना

को निर्मित 9 अक्तू॰ 2019 · 13टिप्पणियाँ · स्रोत: Zaid-Ajaj/Feliz

आप इस तरह के सिंटैक्स के बारे में कैसा महसूस करते हैं? (मैंने इसे जल्दी से तैयार किया है; सुधार के लिए बहुत जगह हो सकती है - उदाहरण के लिए, प्रत्येक घटक के अंत में .reactElement को खत्म करने का एक तरीका हो सकता है जब इस पर अधिक सावधानी से विचार किया जाता है।)

``` च#
ऐपबार ()
.स्थिति.निरपेक्ष
।बच्चे([
टाइपोग्राफी ()
.variant.h6
.रंग.प्राथमिक
.पाठ ("फू")
प्रतिक्रिया तत्व
])
प्रतिक्रिया तत्व

Benefits: Supports inheritance, and puts a final end to any discoverability issues still left in Feliz: No more hunting for the correct prop type; you're just dotting through and seeing what's available. Also supports overloaded props and enum props just like Feliz; we have basically just replaced property lists with "fluent builders".

Drawbacks: I don't know which impacts this has for bundle size or performance (see quick and dirty implementation below). Also it's "unusual" as far as Fable goes (no prop lists). Not that the latter matters by itself. **Update:** See more challenges here: https://github.com/Zaid-Ajaj/Feliz/issues/54#issuecomment-541658081

I'm not saying we should necessarily do this; I just wanted to get this out of my head and post it for discussion.

For the record, below is the implementation of the above syntax. I have not made any attempts to inline or erase stuff. And there's a bit of type trickery which would likely cause OO fanatics to spin in their graves (what with subtypes inheriting base types parametrized by the subtype and all).

```f#
open Fable.Core.JsInterop
open Fable.React

let reactElement (el: ReactElementType) (props: 'a) : ReactElement =
  import "createElement" "react"


[<AbstractClass>]
type PropsBase() =
  abstract ElementType : ReactElementType
  member internal __.Props = ResizeArray<string * obj>()
  member internal this.reactElement =
    reactElement this.ElementType (createObj this.Props)


[<AbstractClass>]
type PropsBase<'a>() =
  inherit PropsBase()

  member this.custom (key: string) (value: obj) =
    this.Props.Add(key, value)
    this |> unbox<'a>

  member this.children (elems: seq<ReactElement>) =
    // should also call React.Children.ToArray
    this.custom "children" elems

  member this.text (text: string) =
    this.custom "children" text


type AppBarPosition<'a when 'a :> PropsBase<'a>>(parent: 'a) =
  member __.absolute = parent.custom "position" "absolute"
  member __.relative = parent.custom "position" "relative"


type AppBar() =
  inherit PropsBase<AppBar> ()
  member this.position = AppBarPosition(this)
  override __.ElementType = importDefault "@material-ui/core/AppBar"


type TypographyVariant<'a when 'a :> PropsBase<'a>>(parent: 'a) =
  member __.h5 = parent.custom "variant" "h5"
  member __.h6 = parent.custom "variant" "h6"

type TypographyColor<'a when 'a :> PropsBase<'a>>(parent: 'a) =
  member __.primary = parent.custom "color" "primary"
  member __.secondary = parent.custom "color" "secondary"


type Typography() =
  inherit PropsBase<Typography> ()
  member this.variant = TypographyVariant(this)
  member this.color = TypographyColor(this)
  override __.ElementType = importDefault "@material-ui/core/Typography"

स्रोत

cmeeren

सभी 13 टिप्पणियाँ

यदि .reactElement चला जाएगा, तो सिंटैक्स अपने आप में OK-ish होगा, लेकिन अन्य तृतीय-पक्ष बाइंडिंग के साथ उपयोग किए जाने पर यह अलग दिखाई देगा, लेकिन मुझे लगता है कि उपयोगकर्ता कम से कम इसके साथ रह सकते हैं:

Html.div [
  Mui.appBar()
    .position.absolute
    .children([
      Mui.typography()
        .variant.h6
        .color.primary
        .text("Foo")
    ])
]

लेकिन मुझे अभी भी लगता है कि आधार गुणों की नकल करना सबसे आसान होगा। मुझे नहीं लगता कि आपको हर एक संपत्ति की नकल करने की आवश्यकता है क्योंकि कई बार आप उनका उपयोग नहीं करेंगे, बस उन लोगों की नकल करें जिनका उपयोग किए जाने की सबसे अधिक संभावना है: id , key , className , style , children और बहुत ही दुर्लभ मामलों के लिए prop वापस गिरना। तुम क्या सोचते हो?

Zaid-Ajaj 10 अक्तू॰ 2019

https://github.com/cmeeren/Feliz.MaterialUI/issues/20 में वंशानुक्रम की निरंतर चर्चा चूंकि यह मुद्दा केवल वैकल्पिक वाक्यविन्यास के बारे में है, जो कि विरासत के साथ मेरे संघर्षों से अलग अपने आप में एक विचार है (क्षमा करें यदि वह स्पष्ट नहीं था)।

cmeeren 10 अक्तू॰ 2019

मुझे लगता है कि धाराप्रवाह वाक्यविन्यास में एक और कमी है, उदाहरण के लिए यदि मैं एक एक्स्टेंसिबल नियंत्रण बनाना चाहता हूं, तो मैं उपज का उपयोग कर सकता हूं! नए सहारा जोड़ने के लिए। या मैं सीमित प्रॉप्स के लिए यूनियन केस बना सकता हूं और बेस प्रॉप्स प्राप्त करने के लिए कम कर सकता हूं और इसे कहीं भी मैं चाहता हूं। लेकिन धाराप्रवाह वाक्य रचना के साथ मैं केवल अंत में सहारा जोड़ सकता हूँ।

let myButton props =
    Html.button [
        prop.Classes [ ... ]
        prop.Style [....]
        yield! props
    ]

albertwoo 11 अक्तू॰ 2019

@albertwoo मुझे पूरी तरह से यकीन नहीं है कि आपका क्या मतलब है

या मैं सीमित प्रॉप्स के लिए यूनियन केस बना सकता हूं और बेस प्रॉप्स प्राप्त करने के लिए कम कर सकता हूं और इसे कहीं भी मैं चाहता हूं।

लेकिन धाराप्रवाह सिंटैक्स का उपयोग करके मनमाने ढंग से प्रॉप्स के लिए समर्थन जोड़ने में कोई समस्या नहीं है:

f# let myButton props = Html.button .classes([...]) .style([...]) .custom(props)

जहां custom हम जो कुछ भी चाहते हैं उसे स्वीकार करने वाले ओवरलोड हो सकते हैं, वास्तव में:

string * obj
फ़ेलिज़ प्रोप प्रकार (इंटरऑप के लिए)
Fable.React प्रोप प्रकार (इंटरऑप के लिए)
उपरोक्त में से किसी के अनुक्रम

cmeeren 11 अक्तू॰ 2019

किसी भी मामले में, धाराप्रवाह वाक्यविन्यास वाले एक्स्टेंसिबल घटकों के लिए, आप शायद उस तरह के प्रोप पास नहीं करेंगे। आप कुछ ऐसा करेंगे:

``` च#
चलो myButton () =
एचटीएमएल.बटन
कक्षाएं ([...])
।अंदाज([...])

And then use it like this:

```f#
myButton()
  .text("foo")

cmeeren 11 अक्तू॰ 2019

मुझे प्रॉप्स लिस्ट स्टाइल पसंद है। मेरे कोड में मैंने कुछ ऐसा किया:

type ISimpleFieldProp = interface end

[<RequireQualifiedAccess>]
type SimpleFieldProp =
  | Label of string
  | Errors of string list 
  | OuterClasses of string list
  | LabelClasses of string list
  | ErrorClasses of string list
  | FieldView of ReactElement
  | OuterAttrs of IHTMLProp list
  interface ISimpleFieldProp

let simpleField (props: ISimpleFieldProp list) =
    let props = props |> List.choose (function :? SimpleFieldProp as x -> Some x | _ -> None)
    let label             = props |> UnionProps.tryLast (function SimpleFieldProp.Label x -> Some x | _ -> None)
    let errorClasses      = props |> UnionProps.tryLast (function SimpleFieldProp.ErrorClasses x -> Some x | _ -> None) |> Option.defaultValue []
    let outerClasses      = props |> UnionProps.concat (function SimpleFieldProp.OuterClasses x -> Some x | _ -> None)
    let labelClasses      = props |> UnionProps.concat (function SimpleFieldProp.LabelClasses x -> Some x | _ -> None)

    div </> [
      yield! props |> UnionProps.concat (function SimpleFieldProp.OuterAttrs x -> Some x | _ -> None)
      match outerClasses with
        | [] -> Style [ Margin "5px"; Padding "5px" ]
        | cs -> Classes cs
      Children [
        if label.IsSome then fieldLabel labelClasses label.Value 

        match props > UnionProps.tryLast (function SimpleFieldProp.FieldView x -> Some x | _ -> None) with
          | Some x -> x
          | None    -> ()

        yield! 
          props 
          |> UnionProps.concat (function SimpleFieldProp.Errors x -> Some x | _ -> None)
          |> fieldError errorClasses
      ]
    ]

UnionProps.concat मैं IHTMLProp, क्लास स्ट्रिंग, स्टाइल आदि जैसी सभी चीजों को मर्ज कर सकता हूं और Fable.React को फीड कर सकता हूं। तब मैं इसे इस तरह उपयोग कर सकता हूं:

let simpleField1 props =
   simpleField [
      SimpleFieldProp.OuterClasses [ ... ]
   ]
let simpleField2 props =
   simpleField1 [
      SimpleFieldProp.OuterClasses [ ... ]
   ]

और सभी OuterClasses एक साथ विलीन हो सकते हैं। बेशक अगर एक साथ विलय नहीं है तो मैं चाहता हूं कि मैं सिर्फ UnionProps.tryLast का उपयोग कर सकूं।

ऑपरेटर के लिए </> : मैंने मौजूदा Fable.React तत्व के लिए दो [] [] से [] बनाने के लिए बनाया है। https://github.com/albertwoo/Fun.LightForm/blob/master/src/Fun.LightForm.Fable/Fable.React.Extra.fs

albertwoo 11 अक्तू॰ 2019

विस्तृत उदाहरण के लिए धन्यवाद। मुझे यह स्वीकार करना होगा कि इसने मुझे भ्रमित कर दिया है। उदाहरण के लिए, ऐसा लगता है कि आप फ़ेलिज़ का बिल्कुल भी उपयोग नहीं कर रहे हैं, लेकिन सामान्य Fable.React। इसलिए मुझे यह समझने में मुश्किल हो रही है कि यह इस चर्चा के लिए कैसे प्रासंगिक है।

साथ ही, कई "विरासत में मिली"/रचित कक्षाओं से एक ही प्रोप के लिए प्रोप मानों को विलय करना मुझे एक्स्टेंसिबिलिटी करने के लिए एक अनावश्यक रूप से गन्दा तरीका लगता है कि रिएक्ट/जेएसएक्स आधारित सिंटैक्स (एएफएआईके) में एक घटक में किसी दिए गए प्रोप की केवल एक घटना हो सकती है .

ऐसा लगता है कि आप जो करने की कोशिश कर रहे हैं, वह एक कस्टम घटक को परिभाषित करना है जो मुट्ठी भर वैकल्पिक, कस्टम प्रॉप्स का समर्थन करता है, जिनमें से कुछ प्रॉप्स हैं और जिनमें से कुछ चाइल्ड एलिमेंट हैं।

फ़ेलिज़ में (जैसा कि अब है, बिना किसी धाराप्रवाह वाक्यविन्यास के), मेरे सिर के ऊपर से, मैं इसे इस तरह हल कर सकता हूं (आंशिक कार्यान्वयन; उम्मीद है कि बाकी प्रोप स्पष्ट होना चाहिए):

``` च#
फ़ेलिज़ो खोलें

के साथ एचटीएमएल टाइप करें

सदस्य सरल फ़ील्ड (
लेबल: स्ट्रिंग,
त्रुटियाँ: स्ट्रिंग सूची,
लेबल क्लासेस: स्ट्रिंग सूची,
?outerClasses: स्ट्रिंग सूची
प्रॉप्स: IReactProperty सूची) =
// सुनिश्चित नहीं है कि यह सही है, क्योंकि मुझे नहीं पता कि UnionProps.concat वास्तव में क्या है
// करता है, लेकिन मुझे यकीन है कि आपको जिस्ट मिल गया है
चलो lbClasses = labelClasses |> Option.defaultValue []

Html.div [
  yield! props |> Option.defaultValue []
  outerClasses |> Option.map prop.classes |> Option.defaultValue (prop.style [ ... ])
  prop.children [
    match label with Some lb -> fieldLabel lbClasses lb | None -> ()
    ...
  ]
]

This also allows you to easily make any of the props required, if you desire.

As regards the fluent syntax under discussion, it would work the same way.

The usage of the example above would be:

```f#
Html.simpleField(
  label = "foo",
  outerClasses = ["bar"]
)

यह भी ध्यान दें कि कस्टम रिएक्ट घटक बनाना (उदाहरण के लिए Fable.React के FunctionComponent.Of साथ फ़ंक्शन घटक) पुन: प्रयोज्य करने का एक शानदार तरीका हो सकता है।

cmeeren 11 अक्तू॰ 2019

हां, मैं फेलिज का उपयोग नहीं कर रहा हूं (मैंने कोशिश की लेकिन अभी तक कोई एसएसआर समर्थन नहीं है)। लेकिन मैं सिर्फ प्रोप लिस्ट स्टाइल के बारे में अपने विचार बताना चाहता हूं।
हां क्लास और स्टाइल जैसे प्रॉप्स को एक साथ मिलाने के लिए थोड़ा गड़बड़ होगा, लेकिन यह मेरे लिए अपना ऐप लिखने के लिए चीजों को आसान बना देता है।
आपका उपरोक्त उदाहरण शानदार ज़ामरीन डिफ़ॉल्ट तरीके से बहुत पसंद है (मैं उस प्रोजेक्ट का भी उपयोग करता हूं)। कभी-कभी simpleField का विस्तार करना आसान नहीं होता है। उदाहरण के लिए यदि मैं पुन: उपयोग करने के लिए simpleField2 बनाना चाहता हूं तो मुझे इनपुट पैरामीटर दोहराना होगा जैसे:

type Html with
   member simpleField2(
      ?label: string,
      ?errors: string list,
      ?labelClasses: string list,
      ?outerClasses: string list
      ?props: IReactProperty list) =
     simpleField(label, errors, labelClasses, [ "bar"; yield! outerClasses ], props)

आप लोग काम की सराहना करते हैं !!!

albertwoo 11 अक्तू॰ 2019

संभावित उपाय:

``` च#
SimpleFieldProps टाइप करें = {
लेबल: स्ट्रिंग विकल्प
त्रुटियाँ: स्ट्रिंग सूची
//...
} साथ
स्थिर सदस्य बनाएँ (? लेबल: स्ट्रिंग,? त्रुटियाँ: स्ट्रिंग सूची, ..) = {..}

के साथ एचटीएमएल टाइप करें
सदस्य सिंपलफिल्ड (प्रॉप्स: सिंपलफिल्ल्डप्रॉप्स) = // ...
सदस्य simpleField2 (प्रॉप्स: SimpleFieldProps) =//...

Usage:

```f#
Html.simpleField (SimpleFieldProps.create(..))

cmeeren 11 अक्तू॰ 2019

:) सलाह के लिए धन्यवाद। इस तरह से मदद मिल सकती है लेकिन अगर मेरे पास फैबुलस ज़ामरीन जैसे बहुत सारे प्रॉप्स हैं, तो यह बहुत अधिक काम होगा। यही कारण है कि मैं भी Fabulous.SimpleElements का उपयोग करता हूं (धन्यवाद @ Zaid-Ajaj फिर से :))

albertwoo 11 अक्तू॰ 2019

❤1

.reactElement संबंध में: AFAIK यह वास्तव में कोई समस्या नहीं है, क्योंकि हम यह सुनिश्चित कर सकते हैं कि मौजूदा कोड के साथ इंटरऑपिंग करते समय केवल इसका उपयोग करना आवश्यक है जिसके लिए reactElement आवश्यकता होती है। अन्यथा, गुण स्वीकार करते हैं कि ReactElement धाराप्रवाह एपीआई में (उदाहरण के लिए children ) भी स्वीकार कर भार के हो सकता है PropsBase , आंतरिक रूप से बुला .reactElement ।

हालांकि, एक कमी यह है कि चूंकि सूचियों में केवल एक प्रकार हो सकता है, और सूची के अंदर कोई स्वचालित अपकास्टिंग नहीं है, तो हमें एक स्पष्ट अपकास्ट की आवश्यकता है (उदाहरण के लिए PropsBase ) वैसे भी यदि हमारे पास एक से अधिक तत्व हैं। जब तक इसका कोई अच्छा समाधान न हो, हम reactElement भी रख सकते हैं।

उपरोक्त के लिए एक संभावित समाधान बाल तत्वों की सूची नहीं है, लेकिन [<ParamArray>] का PropsBase । तब मुझे लगता है कि पैरामीटर स्वचालित रूप से अपरिवर्तित हो जाएंगे। लेकिन फिर आपको प्रत्येक आइटम के बीच अल्पविराम की आवश्यकता होती है। (आप [] को () भी बदल देते हैं, लेकिन मुझे वास्तव में इसकी परवाह नहीं है।)

सशर्त सहारा के लिए एक एपीआई भी होना चाहिए। वर्तमान फ़ेलिज़ (और Fable.React) DSL में हम चुनिंदा yield प्रॉप्स कर सकते हैं, लेकिन यहां प्रस्तावित जंजीर प्रोप कॉल के साथ, यह संभव नहीं है। यह एपीआई डिज़ाइन का मामला है, लेकिन मुझे विश्वास नहीं है कि यह सुंदर होगा, उदाहरण के लिए एनम प्रोप के लिए जहां कोई पैरामीटर नहीं है - तो हम bool पैरामीटर नहीं जोड़ सकते हैं, जो एक समाधान हो सकता है तरीकों के लिए।

हमारे पास एक रैपिंग .conditional(bool, 'builder -> 'ignored) , उदाहरण के लिए

f# .prop1("foo") .conditional(false, fun p -> p.prop2("bar")) .prop3("baz")

लेकिन यह सबसे सुंदर एपीआई नहीं है जिसे मैंने देखा है। (बहुत बुरा नहीं है, लेकिन मौजूदा सशर्त yield बेहतर IMHO है।)

cmeeren 14 अक्तू॰ 2019

अगर मैं सी # में डीएसएल लिख रहा था, तो यह वह वाक्यविन्यास है जिसे मैं निश्चित रूप से लिखना चाहता था, लेकिन चूंकि हमारे पास एफ # है और यह सभी अच्छी सूची वाक्यविन्यास है, इसलिए मैं इसके बजाय वर्तमान का उपयोग करता हूं

Zaid-Ajaj 14 अक्तू॰ 2019

👍1

गोचा। इस वाक्यविन्यास के बारे में मुझे केवल एक चीज पसंद है कि यह अब तक मैंने देखा है कि यह सबसे अधिक खोज योग्य है। अन्यथा ऐसा लगता है कि वर्तमान की तुलना में इसमें बहुत अधिक कमियां हैं।

cmeeren 14 अक्तू॰ 2019

👍1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Feliz: वैकल्पिक धाराप्रवाह वाक्य रचना

सभी 13 टिप्पणियाँ

संबंधित मुद्दों