JSX +- toggles like LiveScript object literals (#135)

DanielXMoore · Jan 7, 2023 · 5d81e00 · 5d81e00
1 parent 680beed
commit 5d81e00
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/civet.dev/cheatsheet.md b/civet.dev/cheatsheet.md
@@ -357,6 +357,7 @@ for item of iterable
 ## JSX
 
 Enhancements, inspired by [solid-dsl discussions](https://github.com/solidjs-community/solid-dsl/discussions)
+and [jsx spec issues](https://github.com/facebook/jsx/issues)
 
 ### Element id
 
@@ -375,6 +376,12 @@ Enhancements, inspired by [solid-dsl discussions](https://github.com/solidjs-com
   <div .{expression}> Civet
 </Playground>
 
+### Boolean Toggles
+
+<Playground>
+  <Component +draggable -disabled>
+</Playground>
+
 ### Attributes
 
 <Playground>

diff --git a/source/parser.hera b/source/parser.hera
@@ -3967,6 +3967,11 @@ JSXAttribute
       class: $2,
     }
 
+  # NOTE: Matching LiveScript flagging shorthand +x -y -> x={true} y={false}
+  $[+-]:toggle JSXAttributeName:id ->
+    const value = toggle === "+" ? "true" : "false"
+    return [ " ", id, "={", value, "}" ]
+
 JSXShorthandString
   /(?:[\w\-:]+|\([^()]*\)|\[[^\[\]]*\])+/ ->
     return module.quoteString($0)

diff --git a/test/jsx/attr.civet b/test/jsx/attr.civet
@@ -305,3 +305,20 @@ describe "JSX class shorthand", ->
     ---
     <div class={["class1 class2 t-[5px]", myClass(), anotherClass].filter(Boolean).join(" ")} id="id"/>
   """
+
+describe "LiveScript-like toggles", ->
+  testCase """
+    single toggle
+    ---
+    <div +draggable/>
+    ---
+    <div draggable={true}/>
+  """
+
+  testCase """
+    multiple toggles
+    ---
+    <Component +draggable +enabled -visible/>
+    ---
+    <Component draggable={true} enabled={true} visible={false}/>
+  """