JSX +- toggles like LiveScript object literals

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>

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)

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}/>
+  """