Add support for Feliz style (#930)

* Support Feliz style

* Refactored Feliz expressions. Fixes #927

* Added SingleArgumentWebMode to schema.json

* Bump to alpha 011

RELEASE_NOTES.md

@@ -1,4 +1,4 @@
-### 4.0.0-alpha-010 - 06/2020
+### 4.0.0-alpha-011 - 06/2020
 * WIP for [#705](https://github.com/fsprojects/fantomas/issues/705)
 * FCS 36
 

src/Fantomas.CoreGlobalTool.Tests/Fantomas.CoreGlobalTool.Tests.fsproj

@@ -4,7 +4,7 @@
     <TargetFramework>netcoreapp3.1</TargetFramework>
     <IsPackable>false</IsPackable>
     <GenerateProgramFile>false</GenerateProgramFile>
-    <Version>4.0.0-alpha-010</Version>
+    <Version>4.0.0-alpha-011</Version>
     <NoWarn>FS0988</NoWarn>
   </PropertyGroup>
   <ItemGroup>

src/Fantomas.CoreGlobalTool/Fantomas.CoreGlobalTool.fsproj

@@ -4,7 +4,7 @@
     <TargetFramework>netcoreapp3.1</TargetFramework>
     <ToolCommandName>fantomas</ToolCommandName>
     <PackAsTool>True</PackAsTool>
-    <Version>4.0.0-alpha-010</Version>
+    <Version>4.0.0-alpha-011</Version>
     <AssemblyName>fantomas-tool</AssemblyName>
   </PropertyGroup>
   <ItemGroup>

src/Fantomas.Tests/ElmishTests.fs

@@ -569,3 +569,145 @@ let view dispatch model =
         ]
     ]
 """
+
+[<Test>]
+let ``short feliz element`` () =
+    formatSourceString false """let a =
+    Html.h1 [ prop.text "some title" ]
+"""  config
+    |> prepend newline
+    |> should equal """
+let a = Html.h1 [ prop.text "some title" ]
+"""
+
+[<Test>]
+let ``multiline feliz element`` () =
+    formatSourceString false """let a =
+        Html.button [
+            prop.style [ style.marginLeft 5 ]
+            prop.onClick (fun _ -> setCount(count - 1))
+            prop.text "Decrement"
+        ]
+"""  { config with SingleArgumentWebMode = true }
+    |> prepend newline
+    |> should equal """
+let a =
+    Html.button [
+        prop.style [ style.marginLeft 5 ]
+        prop.onClick (fun _ -> setCount (count - 1))
+        prop.text "Decrement"
+    ]
+"""
+
+[<Test>]
+let ``nested feliz elements`` () =
+    formatSourceString false """let a =
+    Html.div [
+        Html.h1 [ prop.text "short" ]
+        Html.button [
+            prop.style [ style.marginRight 5 ]
+            prop.onClick (fun _ -> setCount(count + 1))
+            prop.text "Increment"
+        ]
+    ]
+"""  { config with SingleArgumentWebMode = true }
+    |> prepend newline
+    |> should equal """
+let a =
+    Html.div [
+        Html.h1 [ prop.text "short" ]
+        Html.button [
+            prop.style [ style.marginRight 5 ]
+            prop.onClick (fun _ -> setCount (count + 1))
+            prop.text "Increment"
+        ]
+    ]
+"""
+
+[<Test>]
+let ``feliz counter sample`` () =
+    formatSourceString false """module App
+
+open Feliz
+
+let counter = React.functionComponent(fun () ->
+    let (count, setCount) = React.useState(0)
+    Html.div [
+        Html.button [
+            prop.style [ style.marginRight 5 ]
+            prop.onClick (fun _ -> setCount(count + 1))
+            prop.text "Increment"
+        ]
+
+        Html.button [
+            prop.style [ style.marginLeft 5 ]
+            prop.onClick (fun _ -> setCount(count - 1))
+            prop.text "Decrement"
+        ]
+
+        Html.h1 count
+    ])
+
+open Browser.Dom
+
+ReactDOM.render(counter, document.getElementById "root")
+"""  { config with SingleArgumentWebMode = true }
+    |> prepend newline
+    |> should equal """
+module App
+
+open Feliz
+
+let counter =
+    React.functionComponent (fun () ->
+        let (count, setCount) = React.useState (0)
+        Html.div [
+            Html.button [
+                prop.style [ style.marginRight 5 ]
+                prop.onClick (fun _ -> setCount (count + 1))
+                prop.text "Increment"
+            ]
+
+            Html.button [
+                prop.style [ style.marginLeft 5 ]
+                prop.onClick (fun _ -> setCount (count - 1))
+                prop.text "Decrement"
+            ]
+
+            Html.h1 count
+        ])
+
+open Browser.Dom
+
+ReactDOM.render (counter, document.getElementById "root")
+"""
+
+[<Test>]
+let ``feliz syntax`` () =
+    formatSourceString false """
+Html.h1 42
+
+Html.div "Hello there!"
+
+Html.div [ Html.h1 "So lightweight" ]
+
+Html.ul [
+  Html.li "One"
+  Html.li [ Html.strong "Two" ]
+  Html.li [ Html.em "Three" ]
+]
+"""  { config with SingleArgumentWebMode = true }
+    |> prepend newline
+    |> should equal """
+Html.h1 42
+
+Html.div "Hello there!"
+
+Html.div [ Html.h1 "So lightweight" ]
+
+Html.ul [
+    Html.li "One"
+    Html.li [ Html.strong "Two" ]
+    Html.li [ Html.em "Three" ]
+]
+"""

src/Fantomas.Tests/Fantomas.Tests.fsproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
   <Import Project="..\netfx.props" />
   <PropertyGroup>
-    <Version>4.0.0-alpha-010</Version>
+    <Version>4.0.0-alpha-011</Version>
     <NoWarn>FS0988</NoWarn>
     <TargetFramework>netcoreapp3.1</TargetFramework>
   </PropertyGroup>

src/Fantomas/CodePrinter.fs

@@ -825,23 +825,47 @@ and genExpr astContext synExpr =
     let sepCloseT = tokN synExpr.Range "RPAREN" sepCloseT
 
     match synExpr with
-    | ElmishReactWithoutChildren(identifier, attributes) ->
+    | ElmishReactWithoutChildren(identifier, isArray, children) ->
         fun ctx ->
-            let maxRemainingArrayLength = ctx.Config.MaxElmishWidth - identifier.Length
-            let ctx' =
-                { ctx with Config = { ctx.Config with
-                                        MaxArrayOrListWidth = maxRemainingArrayLength
-                                        // override user setting to get original fantomas formatting
-                                        MultilineBlockBracketsOnSameColumn = false } }
-            (!- identifier
-             +> sepSpace
-             +> genExpr astContext attributes
-             +> fun cty ->
-                 // reset the config with original values
-                 { cty with Config = { cty.Config with
-                                         MaxArrayOrListWidth = ctx.Config.MaxArrayOrListWidth
-                                         MultilineBlockBracketsOnSameColumn = ctx.Config.MultilineBlockBracketsOnSameColumn } }) ctx'
+            let shortExpression =
+                let noChildren =
+                    ifElse isArray sepOpenAFixed sepOpenLFixed
+                    +> ifElse isArray sepCloseAFixed sepCloseLFixed
+
+                let genChildren =
+                    ifElse isArray sepOpenA sepOpenL
+                    +> col sepSemi children (genExpr astContext)
+                    +> ifElse isArray sepCloseA sepCloseL
 
+                !- identifier
+                +> sepSpace
+                +> ifElse (List.isEmpty children) noChildren genChildren
+
+            let elmishExpression =
+                !- identifier
+                +> sepSpace
+                +> ifElse isArray sepOpenA sepOpenL
+                +> atCurrentColumn (col sepNln children (genExpr astContext))
+                +> ifElse isArray sepCloseA sepCloseL
+
+            let felizExpression =
+                atCurrentColumn (!- identifier
+                                 +> sepSpace
+                                 +> ifElse isArray sepOpenAFixed sepOpenLFixed
+                                 +> indent
+                                 +> sepNln
+                                 +> col sepNln children (genExpr astContext)
+                                 +> unindent
+                                 +> sepNln
+                                 +> ifElse isArray sepCloseAFixed sepCloseLFixed)
+
+            let multilineExpression = ifElse ctx.Config.SingleArgumentWebMode felizExpression elmishExpression
+
+            isShortExpression
+                ctx.Config.MaxElmishWidth
+                shortExpression
+                multilineExpression
+                ctx
 
     | ElmishReactWithChildren((identifier,_,_), attributes, (isArray,children)) ->
         let genChildren isShort =

src/Fantomas/Fantomas.fsproj

@@ -3,7 +3,7 @@
   <Import Project="..\netfx.props" />
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>
-    <Version>4.0.0-alpha-010</Version>
+    <Version>4.0.0-alpha-011</Version>
     <Description>Source code formatter for F#</Description>
   </PropertyGroup>
   <ItemGroup>

src/Fantomas/FormatConfig.fs

@@ -38,6 +38,7 @@ type FormatConfig =
       NewlineBetweenTypeDefinitionAndMembers: bool
       KeepIfThenInSameLine : bool
       MaxElmishWidth: Num
+      SingleArgumentWebMode: bool
       /// Prettyprinting based on ASTs only
       StrictMode : bool }
 
@@ -65,6 +66,7 @@ type FormatConfig =
           MultilineBlockBracketsOnSameColumn = false
           KeepIfThenInSameLine = false
           MaxElmishWidth = 40
+          SingleArgumentWebMode = false
           NewlineBetweenTypeDefinitionAndMembers = false
           StrictMode = false }
 

src/Fantomas/SourceParser.fs

@@ -1427,10 +1427,9 @@ let isFunctionBinding (p: SynPat) =
 
 let (|ElmishReactWithoutChildren|_|) e =
     match e with
-    | App(OptVar(ident,_,_), [ArrayOrList(_) as attributes]) ->
-        Some(ident, attributes)
-    | App(OptVar(ident,_,_), [ArrayOrListOfSeqExpr(_, CompExpr(_, Sequentials _)) as attributes]) ->
-        Some(ident, attributes)
+    | App(OptVar(ident,_,_), [ArrayOrList(isArray, children, _)])
+    | App(OptVar(ident,_,_), [ArrayOrListOfSeqExpr(isArray, CompExpr(_, Sequentials children))]) ->
+        Some(ident, isArray, children)
     | _ ->
         None
 

src/Fantomas/schema.json

@@ -74,6 +74,9 @@
     "MaxElmishWidth": {
       "type": "integer"
     },
+    "SingleArgumentWebMode": {
+      "type": "boolean"
+    },
     "StrictMode": {
       "type": "boolean"
     }