From 74f31bf2557fe99f78bcf9e57b1a7bcd76378a8e Mon Sep 17 00:00:00 2001
From: Erik Demaine <edemaine@mit.edu>
Date: Fri, 6 Jan 2023 18:20:11 -0500
Subject: [PATCH] JSX +- toggles like LiveScript object literals

---
 civet.dev/cheatsheet.md |  7 +++++++
 source/parser.hera      |  5 +++++
 test/jsx/attr.civet     | 17 +++++++++++++++++
 3 files changed, 29 insertions(+)

diff --git a/civet.dev/cheatsheet.md b/civet.dev/cheatsheet.md
index 5e517f84..3a44cb99 100644
--- 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
index faff506b..d8362afd 100644
--- 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
index 4045b8c5..d3c34475 100644
--- 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}/>
+  """