Feliz: рд╕рдВрднрд╛рд╡рд┐рдд рдмрдЧ: Preact . рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рдЕрдиреБрдкрд▓рдмреНрдз рдЯреИрдЧ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 17 рдордИ 2020  ┬╖  10рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: Zaid-Ajaj/Feliz

рдореИрдВрдиреЗ рдЕрдкрдиреА рдПрдХ рдореМрдЬреВрджрд╛ рдмрдбрд╝реА рд╕рд╛рдЗрдЯ рдХреЛ Fable.React рд╕реЗ Feliz рдореЗрдВ рдмрджрд▓рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИред рдпрд╣ Preact (atm v10.3.1) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ, рдФрд░ рдпрд╣ Fable.React рдХреЗ рд╕рд╛рде рддреНрд░реБрдЯрд┐рдкреВрд░реНрдг рд░реВрдк рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдЗрд╕реЗ рдлрд╝реЗрд▓рд┐рдЬрд╝ рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрд┐рдд рдХрд░рддреЗ рд╣реБрдП, рдореИрдВрдиреЗ рд▓рд╛рдкрддрд╛ рдЯреИрдЧ рджреЗрдЦреЗред рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдХреБрдЫ рдмрдЪреНрдЪреЗ рдбреЛрдо рдореЗрдВ рднреА рдирд╣реАрдВ рд╣реИрдВ, рдФрд░ рдХреБрдЫ рдкреЗрдЬ рд╕рд┐рд░реНрдл рд░реВрдЯ рдЯреИрдЧ рдХреЛ рдЫреЛрдбрд╝рдХрд░ рдЦрд╛рд▓реА рд╣реИрдВред

рдореИрдВ рдЖрдВрд╢рд┐рдХ рд░реВрдк рд╕реЗ SAFE рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╕рдорд╕реНрдпрд╛ рдХреЛ рдкреБрди: рдЙрддреНрдкрдиреНрди рдХрд░рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣рд╛ред рд╕рд░рд▓реАрдХреГрдд рдЙрджрд╛рд╣рд░рдг, рдЙрдкрджреЗрд╢ -1 рд╢рд╛рдЦрд╛ рдореЗрдВ (https://github.com/l3m/SAFE.Simplified/tree/preact-1)

рдЙрджрд╛рд╣рд░рдг рдореЗрдВ, рдХрд╛рдЙрдВрдЯрд░ рдЯреИрдЧ рдЦрд╛рд▓реА рд╣реИ, рдкреНрд░реАрдПрдХреНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдорд╛рд╕реНрдЯрд░ рдореЗрдВ рдЬрд╛рдиреЗ рдФрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред SAFE.Simplified рдФрд░ рдореЗрд░реА рд╕рд╛рдЗрдЯ рджреЛрдиреЛрдВ рдореЗрдВ рдореИрдВ рдЗрд╕реЗ рдХреЗрд╡рд▓ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛/рдкреНрд░рдЪрд╛рд░ рдХреЗ рд╕рд╛рде рдкреНрд░рддрд┐рдмрджреНрдзрддрд╛ рдХреА рдЬрд╛рдВрдЪ рдХрд░рдХреЗ, deps рдФрд░ рдЗрдорд╛рд░рдд рдХреЛ рдкреБрдирд░реНрд╕реНрдерд╛рдкрд┐рдд рдХрд░рдХреЗ рдЗрд╕реЗ рдХрд╛рдо/рддреЛрдбрд╝ рд╕рдХрддрд╛ рд╣реВрдВред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдореИрдВрдиреЗ рдЕрднреА v1.8 рдкреНрд░рдХрд╛рд╢рд┐рдд рдХрд┐рдпрд╛ рд╣реИ рдЬреЛ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд╕реЗ Children.toArray рдореЗрдВ рдкрд╛рд░рд┐рдд рд╣реЛрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рддрддреНрд╡реЛрдВ рдХреЛ рд╕рд░рдгреА рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрд┐рдд рдХрд░рддрд╛ рд╣реИред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдЕрднреА рдХреЗ рд▓рд┐рдП рд╕рдорд╕реНрдпрд╛ рдХреЛ рдареАрдХ рдХрд░рддрд╛ рд╣реИред @VitalyBrusentsev рдХреНрдпрд╛ рдЖрдк рдХреГрдкрдпрд╛ рдкреБрд╖реНрдЯрд┐ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ? рдХрд┐рд╕реА рднреА рдорд╛рдорд▓реЗ рдореЗрдВ, рдореИрдВ рдЗрд╕ рд░рдирдЯрд╛рдЗрдо рдЖрдордВрддреНрд░рдг рдХреЛ рджреВрд░ рдХрд░рдиреЗ рдХреА рдпреЛрдЬрдирд╛ рдмрдирд╛ рд░рд╣рд╛ рд╣реВрдВ рдЬрдм Fable 3 рдмрд╛рд╣рд░ рдЖрддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдЕрднреА рдХреЗ рд▓рд┐рдП рдкрд░реНрдпрд╛рдкреНрдд рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП

рд╕рднреА 10 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рд╣рд╛рдп @ l3m , рдореИрдВрдиреЗ

рдореИрдВ рдЬрд▓реНрдж рд╣реА рдЗрд╕рдХреА рдЬрд╛рдВрдЪ рдХрд░реВрдВрдЧрд╛

рдореИрдВрдиреЗ рдмрдВрдж рдХрд░ рджрд┐рдпрд╛ рдФрд░ рдлрд┐рд░ рд╕реЗ рдЦреЛрд▓ рджрд┐рдпрд╛ рдХреНрдпреЛрдВрдХрд┐ рдореБрдЭреЗ рд▓рдЧрд╛ рдХрд┐ рдкреНрд░реАрдПрдХреНрдЯ рдиреЗ рднреА рд░рд┐рдПрдХреНрдЯ рдХреЛ рддреЛрдбрд╝ рджрд┐рдпрд╛ рд╣реИред рдлреИрдмрд▓, рд▓реЗрдХрд┐рди рдкрддрд╛ рдЪрд▓рд╛ рдХрд┐ рдореЗрд░реЗ рдкрд╛рд╕ рдбреЛрдо рдЯреНрд░реА рдореЗрдВ рд╕рд┐рд░реНрдл рдПрдХ рдлреЗрд▓рд┐рдЬ рдШрдЯрдХ рдерд╛ рдФрд░ рдЙрд╕рдиреЗ рдЗрд╕реЗ рддреЛрдбрд╝ рджрд┐рдпрд╛ред

рдореИрдВрдиреЗ рдереЛрдбрд╝рд╛ рдЗрдзрд░-рдЙрдзрд░ рджреЗрдЦрд╛ рдФрд░ рдХреБрдЫ рдкрд░реАрдХреНрд╖рдг рдХрд┐рдпрд╛ред рдпрд╣ ReactElements рдХреА рд╕реВрдЪреА рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЬреИрд╕реЗ рд╣реА рдЖрдк рд╕реВрдЪреА рдХреЗ рдмреАрдЪ рдореЗрдВ if рдпрд╛ match рдПрдХреНрд╕рдкреНрд░реЗрд╢рди рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ рддреЛ рдпрд╣ рдЯреВрдЯ рдЬрд╛рддрд╛ рд╣реИред рдЗрд╕рдХреЗ рдЕрддрд┐рд░рд┐рдХреНрдд, рдпрджрд┐ рдореИрдВ рдХрд┐рд╕реА рдХрд╛рд░реНрдп рд╕реВрдЪреА рдХреЛ рдЙрд╕рдХреЗ рд╕реНрд╡рдпрдВ рдХреЗ let рдмрд╛рдЙрдВрдб рд╡реИрд▓реНрдпреВ рдореЗрдВ рдЦреАрдВрдЪрддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдХрд╛рдо рдХрд░рдирд╛ рдмрдВрдж рдХрд░ рджреЗрддрд╛ рд╣реИред

рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ:

prop.children [
    Html.text "Blah"
]

рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛:

prop.children [
    if true then Html.text "Blah"
]

рднреА рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ:

let children = [
    Html.text "Blah"
]
...

prop.children children

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдкреНрд░реАрдПрдХреНрдЯ рдореБрджреНрджрд╛ рд╕рдВрдмрдВрдзрд┐рдд рд╣реИред рдореБрдЭреЗ seq рдпрд╛ рд╕реВрдЪреА рдХреЗ рдмрдЬрд╛рдп рд╕рд░рдгрд┐рдпреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрд░реЛрдХреНрдд рд╕рднреА рд╡рд┐рдлрд▓ рдорд╛рдорд▓реЗ рдорд┐рд▓реЗред

@ рдЬрд╝реИрдж-рдЕрдЬрд╛рдЬ рдХреНрдпрд╛ prop.children рдПрдХ рдФрд░ рдЕрдзрд┐рднрд╛рд░ рдЬреЛрдбрд╝рдирд╛ рд╕рдВрднрд╡ рд╣реИ? рдпрд╣ рдмрд┐рдирд╛ рдХрд┐рд╕реА рдмрджрд▓рд╛рд╡ рдХреЗ рдЙрдкрджреЗрд╢ рдХреЗ рдореБрджреНрджреЗ рдХреЛ рд╣рд▓ рдХрд░ рд╕рдХрддрд╛ рд╣реИред

рдЬреИрд╕рд╛ рдХрд┐ @BennieCopeland рджреНрд╡рд╛рд░рд╛ рдХрд╣рд╛ рдЧрдпрд╛ рд╣реИ, рдореБрджреНрджрд╛ рдпрд╣ рд╣реИ рдХрд┐ Preact children рд▓рд┐рдП рдкреБрдирд░рд╛рд╡реГрддреНрддрд┐рдпреЛрдВ рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ (рдФрд░ рдЬрдм рдпрд╣ рдЧрддрд┐рд╢реАрд▓ рд╕рд╛рдордЧреНрд░реА рдХреЗ рд╕рд╛рде рд╕реВрдЪрд┐рдпреЛрдВ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рддрд╛ рд╣реИ рддреЛ Fable рдпрд╣реА рдЙрддреНрдкрдиреНрди рдХрд░рддрд╛ рд╣реИ)ред рдпрд╣ рдЕрдЬреАрдм рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ F# рдореЗрдВ рд╕реВрдЪрд┐рдпреЛрдВ рдХреА рдЙрддреНрд╕реБрдХрддрд╛ рд╕реЗ рдЧрдгрдирд╛ рдХреА рдЬрд╛рдиреА рдЪрд╛рд╣рд┐рдП (рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдирд╣реАрдВ рд╣реИ рдХрд┐ Fable рдЕрдиреНрдпрдерд╛ рдХреНрдпреЛрдВ рд╕реЛрдЪрддрд╛ рд╣реИ)ред
рдпрджрд┐ рд╕реВрдЪрд┐рдпреЛрдВ рдХреЛ рд╕рд░рдгрд┐рдпреЛрдВ рдореЗрдВ рдмрджрд▓ рджрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛, рддреЛ Preact рдареАрдХ рдХрд╛рдо рдХрд░реЗрдЧрд╛ (рдФрд░ рд╣рдореЗрдВ рдмрд╣реБрдд рд╕рд╛рд░реЗ рдЯреНрд░реИрдлрд╝рд┐рдХ рдФрд░ рд▓реЛрдб рд╕рдордп рдХреА рдмрдЪрдд рдХрд░реЗрдЧрд╛! :))

рдореИрдВ рдЕрдкрдиреЗ рд╡рд┐рдЪрд╛рд░реЛрдВ рдХреЛ рдЙрддреНрд╕реБрдХ seq рднреМрддрд┐рдХрдХрд░рдг рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣рд╛ рдФрд░ рдпрд╣ рдкрд░рд┐рднрд╛рд╖рд╛ рдореВрд▓ prop.children

let childrenInternal elems = elems |> Array.ofSeq |> prop.children
module prop =
  let children = childrenInternal

рдпрджрд┐ рдЖрдкрдиреЗ prop.children рдХрд╛ рдПрдХ рдЕрдзрд┐рднрд╛рд░ рдЬреЛрдбрд╝рд╛ рд╣реИ, рддреЛ ReactElement list рдмрдЬрд╛рдп seq (рдФрд░ рдКрдкрд░ рдХреЗ рд░реВрдк рдореЗрдВ рдРрд░реЗ рдХреЛ рд╕реВрдЪреА рдХреЛ рдЕрдорд▓ рдореЗрдВ рд▓рд╛рдирд╛), рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╣рд▓ рд╣реЛ рдЬрд╛рдПрдЧреАред seq рдУрд╡рд░рд▓реЛрдб рдХреЗ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЛ рд░рд┐рдПрдХреНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА, рд▓реЗрдХрд┐рди рд╕реВрдЪреА рд╕рдВрд╕реНрдХрд░рдг рдкреНрд░реАрдПрдХреНрдЯ рдХреЗ рд╕рд╛рде рд╕рдВрдЧрдд рд╣реЛрдЧрд╛ред

рдпрджрд┐ рдЖрдк рд░реБрдЪрд┐ рд░рдЦрддреЗ рд╣реИрдВ рддреЛ рдореИрдВ рдПрдХ рдкреАрдЖрд░ рдмрдирд╛ рд╕рдХрддрд╛ рд╣реВрдВред

рдореБрдЭреЗ рдЗрд╕рдХреЗ рд▓рд┐рдП рдПрдХ рдЕрдирд┐рд╡рд╛рд░реНрдп рдХрд╛рд░рдг рдирд╣реАрдВ рджрд┐рдЦ рд░рд╣рд╛ рд╣реИ рдХрд┐ рдпрд╣ рдХрд┐рд╕реА рднреА рддрд░рд╣ рд╕реЗ seq рдХреА рдмрдЬрд╛рдп рдПрдХ рд╕реВрдЪреА рди рд╣реЛред рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреБрдЫ рднреА рдирд╣реАрдВ рддреЛрдбрд╝рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдореИрдВрдиреЗ рдЕрднреА v1.8 рдкреНрд░рдХрд╛рд╢рд┐рдд рдХрд┐рдпрд╛ рд╣реИ рдЬреЛ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд╕реЗ Children.toArray рдореЗрдВ рдкрд╛рд░рд┐рдд рд╣реЛрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рддрддреНрд╡реЛрдВ рдХреЛ рд╕рд░рдгреА рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрд┐рдд рдХрд░рддрд╛ рд╣реИред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдЕрднреА рдХреЗ рд▓рд┐рдП рд╕рдорд╕реНрдпрд╛ рдХреЛ рдареАрдХ рдХрд░рддрд╛ рд╣реИред @VitalyBrusentsev рдХреНрдпрд╛ рдЖрдк рдХреГрдкрдпрд╛ рдкреБрд╖реНрдЯрд┐ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ? рдХрд┐рд╕реА рднреА рдорд╛рдорд▓реЗ рдореЗрдВ, рдореИрдВ рдЗрд╕ рд░рдирдЯрд╛рдЗрдо рдЖрдордВрддреНрд░рдг рдХреЛ рджреВрд░ рдХрд░рдиреЗ рдХреА рдпреЛрдЬрдирд╛ рдмрдирд╛ рд░рд╣рд╛ рд╣реВрдВ рдЬрдм Fable 3 рдмрд╛рд╣рд░ рдЖрддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рдЕрднреА рдХреЗ рд▓рд┐рдП рдкрд░реНрдпрд╛рдкреНрдд рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП

рдореИрдВрдиреЗ рдлрд╝реЗрд▓рд┐рдЬрд╝ рдХреЛ 1.10 рдореЗрдВ рдЕрдкрдбреЗрдЯ рдХрд┐рдпрд╛ рд╣реИ рдФрд░ рдкреБрд╖реНрдЯрд┐ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдХрд┐ рдРрдк рдкреНрд░реАрдПрдХреНрдЯ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ!
рдЕрдЪреНрдЫрд╛ рдХрд╛рдо

@VitalyBrusentsev рдкреБрд╖реНрдЯрд┐ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж! рдпрд╣ рдмрд╣реБрдд рдЕрдЪреНрдЫреА рдЦрдмрд░ рд╣реИ: рдореБрд╕реНрдХрд╛рди: @BennieCopeland рдФрд░ @l3m рдХреНрдпрд╛ рдЖрдк рдХреГрдкрдпрд╛ рдлрд┐рд░ рд╕реЗ рдЬрд╛рдВрдЪ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдХреНрдпрд╛ рдлрд╝реЗрд▓рд┐рдЬрд╝ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ рдЬреИрд╕реЗ рдХрд┐

рдореИрдВ рдорд╛рди рд▓реВрдВрдЧрд╛ рдХрд┐ Preact рд╕рдорд░реНрдерди рдареАрдХ рд╣реЛ рдЧрдпрд╛ рд╣реИ, рдпрджрд┐ рд╕рдорд╕реНрдпрд╛ рдмрдиреА рд░рд╣рддреА рд╣реИ рддреЛ рдХреГрдкрдпрд╛ рдкреБрдирдГ рдЦреЛрд▓реЗрдВ: рдореБрд╕реНрдХрд╛рди

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕