feat: add clear command

dist/_hyperscript.js

@@ -7454,6 +7454,46 @@
             }
         });
 
+        parser.addCommand("clear", function (parser, runtime, tokens) {
+            if (tokens.matchToken("clear")) {
+                var elementExpr = parser.parseElement("expression", tokens);
+                if (elementExpr == null) {
+                    parser.raiseParseError(
+                        tokens,
+                        "Expected either an attribute expression or value expression"
+                    );
+                }
+
+                if (tokens.matchToken("from")) {
+                    var fromExpr = parser.requireElement("expression", tokens);
+                } else {
+                    if (elementExpr == null) {
+                        var fromExpr = parser.requireElement("implicitMeTarget", tokens);
+                    }
+                }
+
+                    console.log(elementExpr)
+
+                return {
+                    elementExpr: elementExpr,
+                    from: fromExpr,
+                    args: [elementExpr, fromExpr],
+                    op: function (context, element, from) {
+                        runtime.nullCheck(element, elementExpr);
+                        runtime.implicitLoop(element, function (target) {
+                            if (target === element) {
+                                target.replaceChildren()
+                            } else if (target.parentElement && target.parentElement === element.relativeToElement
+                                    && (from == null || from.contains(target))) {
+                                target.replaceChildren()
+                            }
+                        });
+                        return runtime.findNext(this, context);
+                    },
+                };
+            }
+        });
+
         config.conversions.dynamicResolvers.push(function (str, node) {
             if (!(str === "Values" || str.indexOf("Values:") === 0)) {
                 return;

src/_hyperscript.js

@@ -2094,6 +2094,7 @@
         /**
         * @param {string} str
         * @param {Context} context
+        * @param {string} type
         * @returns {any}
         */
         resolveSymbol(str, context, type) {
@@ -7184,7 +7185,6 @@
                                         } else {
                                             target.style[property] = toVal;
                                         }
-                                        //console.log("set", property, "to", target.style[property], "on", target, "value passed in : ", toVal);
                                     }
                                 }, 0);
                             });
@@ -7454,6 +7454,43 @@
             }
         });
 
+        parser.addCommand("clear", function (parser, runtime, tokens) {
+            if (tokens.matchToken("clear")) {
+                var currentToken = tokens.currentToken()
+
+                if (parser.commandBoundary(currentToken)) {
+                    var elementExpr = parser.requireElement("implicitMeTarget", tokens);
+                } else {
+                    var elementExpr = parser.requireElement("expression", tokens);
+                }
+
+                return {
+                    elementExpr: elementExpr,
+                    args: [elementExpr],
+                    op: function (context, element) {
+                        if (element != null)  {
+                            runtime.implicitLoop(element, function (target) {
+                                if (Array.isArray(element) && elementExpr.endToken.type === "IDENTIFIER") {
+                                    element.length = 0;
+                                } else if (target?.clear) {
+                                    target.clear();
+                                } else if (target?.reset) {
+                                    target.reset();
+                                } else if (target?.value != null) {
+                                    target.value = "";
+                                } else if (target === element) {
+                                    target.replaceChildren();
+                                } else if (target.parentElement) {
+                                        target.replaceChildren();
+                                }
+                            });
+                        }
+                        return runtime.findNext(this, context);
+                    },
+                };
+            }
+        });
+
         config.conversions.dynamicResolvers.push(function (str, node) {
             if (!(str === "Values" || str.indexOf("Values:") === 0)) {
                 return;

test/commands/clear.js

@@ -0,0 +1,118 @@
+describe("the clear command", function () {
+	beforeEach(function () {
+		clearWorkArea();
+	});
+	afterEach(function () {
+		clearWorkArea();
+	});
+
+	it("can clear inner text", function () {
+		var div = make("<div _='on click clear me'>foo</div>");
+        div.innerHTML.should.equal("foo")
+		div.click();
+	    div.innerHTML.should.equal("")
+	});
+
+	it("can clear other inner text", function () {
+		var div = make("<div _='on click clear #that'></div>");
+		var div2 = make("<div id='that'>foo</div>");
+        div2.innerHTML.should.equal("foo")
+		div.click();
+        div2.innerHTML.should.equal("")
+	});
+
+	it("can clear elements", function () {
+		var div = make("<div _='on click clear me'><p>foo</p></div>");
+        div.innerHTML.should.equal("<p>foo</p>")
+		div.click();
+	    div.innerHTML.should.equal("")
+	});
+
+	it("can clear other elements", function () {
+		var div = make("<div _='on click clear #that'></div>");
+		var div2 = make("<div id='that'><p>foo</p></div>");
+        div2.innerHTML.should.equal("<p>foo</p>")
+		div.click();
+        div2.innerHTML.should.equal("")
+	});
+
+    it("can clear elements by class name", function () {
+		var div = make("<div _='on click clear .target'><p>foo</p><p class='target'>bar</p></div>");
+        div.innerHTML.should.equal("<p>foo</p><p class=\"target\">bar</p>")
+		div.click();
+        div.innerHTML.should.equal("<p>foo</p><p class=\"target\"></p>")
+    })
+
+    it("can clear elements by class name in other elements", function () {
+		var div = make("<div _='on click clear .target in #that'></div>");
+		var div2 = make("<div id='that'><p>foo</p><p class='target'>bar</p></div>");
+        div2.innerHTML.should.equal("<p>foo</p><p class=\"target\">bar</p>")
+		div.click();
+        div2.innerHTML.should.equal("<p>foo</p><p class=\"target\"></p>")
+    })
+
+	it("can clear parent element", function () {
+		var div = make("<div id='p1'><button  id='b1' _='on click clear my.parentElement'></button></div> ");
+		var btn = byId("b1");
+        div.childElementCount.should.equal(1)
+		btn.click();
+        div.childElementCount.should.equal(0)
+	});
+
+	it("can clear specific things by tag in other elements", function () {
+		var div = make("<div><div id='that'><p>foo</p>bar</div><p>doh</p></div>");
+		var div2 = make("<div _='on click clear <p/> in #that'></div>");
+		div.innerHTML.includes("foo").should.equal(true);
+		div.innerHTML.includes("bar").should.equal(true);
+		div.innerHTML.includes("doh").should.equal(true);
+		div2.click();
+		div.innerHTML.includes("foo").should.equal(false);
+		div.innerHTML.includes("bar").should.equal(true);
+		div.innerHTML.includes("doh").should.equal(false);
+	});
+
+
+	it("can clear specific things by tag in itself", function () {
+		var div = make("<div><div id='d1' _='on click clear <p/> in me'><p>foo</p>bar</div><p>doh</p></div>");
+		var d1 = byId('d1');
+		div.innerHTML.includes("foo").should.equal(true);
+		div.innerHTML.includes("bar").should.equal(true);
+		div.innerHTML.includes("doh").should.equal(true);
+		d1.click();
+		div.innerHTML.includes("foo").should.equal(false);
+		div.innerHTML.includes("bar").should.equal(true);
+		div.innerHTML.includes("doh").should.equal(true);
+	});
+
+    it("can clear an element that has a clear() method", function () {
+        var _ = make("<script>_hyperscript.config.conversions['Set'] = function (val) { return new Set(val)}</script>");
+        var btn = make("<button _='on click set foo to [1, 2, 3] as Set then clear foo then put foo as Array into me'>Hello</button>");
+        btn.innerText.should.equal("Hello");
+        btn.click();
+        btn.innerText.should.equal("");
+    })
+
+    it("can clear arrays", function() {
+        var btn = make("<button _='on click set foo to [1, 2, 3] then clear foo then put foo into me'>Hello</button>");
+        btn.innerText.should.equal("Hello");
+        btn.click();
+        btn.innerText.should.equal("");
+    })
+
+    it("can clear text inputs", function() {
+        var input = make("<input id='that' value='foo' />");
+        var btn = make("<button _='on click clear #that'></button>");
+        input.value.should.equal("foo");
+        btn.click();
+        input.value.should.equal("");
+    })
+
+    it("can clear forms", function() {
+        var form = make("<form id='foo'><input type='text' name='input' value=''/></form>");
+        var btn = make("<button _='on click clear #foo'></button>");
+        form.children[0].value = "bar";
+        form.children[0].value.should.equal("bar");
+        btn.click();
+        form.children[0].value.should.equal("");
+    })
+});

test/index.html

@@ -102,6 +102,7 @@ <h2>Mocha Test Suite</h2>
 		<script src="commands/settle.js"></script>
 		<script src="commands/unlessModifier.js"></script>
 		<script src="commands/increment.js"></script>
+		<script src="commands/clear.js"></script>
 
 		<!-- expressions -->
 		<!--

www/commands/clear.md

@@ -0,0 +1,39 @@
+---
+title: clear - ///_hyperscript
+---
+
+## The `clear` Command
+
+### Syntax
+
+```ebnf
+clear <expression> [in <expression>]
+```
+
+### Description
+
+The `clear` command allows you to clear an element's children or content.
+
+### Examples
+
+```html
+<div _="on click clear me">Clear Me!</div>
+
+<div _="on click clear the first <span/>">Clear This <span>Span</span> Content!</div>
+
+<div _="on click clear <p/>">
+    Clear <p>This</p> <span>Not This</span> <p>This Too</p>!
+</div>
+
+<div _="on click clear #another-div">
+  Clear Another Div!
+</div>
+
+<div _="on click clear .foo in #another-div">
+  Clear An Element In Another Div
+</div>
+<div id="another-div">
+  Clear <span class="foo">This</span> Element!
+</div>
+
+```

www/test/1.0.0-rc1/src/_hyperscript.js

@@ -7454,6 +7454,46 @@
             }
         });
 
+        parser.addCommand("clear", function (parser, runtime, tokens) {
+            if (tokens.matchToken("clear")) {
+                var elementExpr = parser.parseElement("expression", tokens);
+                if (elementExpr == null) {
+                    parser.raiseParseError(
+                        tokens,
+                        "Expected either an attribute expression or value expression"
+                    );
+                }
+
+                if (tokens.matchToken("from")) {
+                    var fromExpr = parser.requireElement("expression", tokens);
+                } else {
+                    if (elementExpr == null) {
+                        var fromExpr = parser.requireElement("implicitMeTarget", tokens);
+                    }
+                }
+
+                    console.log(elementExpr)
+
+                return {
+                    elementExpr: elementExpr,
+                    from: fromExpr,
+                    args: [elementExpr, fromExpr],
+                    op: function (context, element, from) {
+                        runtime.nullCheck(element, elementExpr);
+                        runtime.implicitLoop(element, function (target) {
+                            if (target === element) {
+                                target.replaceChildren()
+                            } else if (target.parentElement && target.parentElement === element.relativeToElement
+                                    && (from == null || from.contains(target))) {
+                                target.replaceChildren()
+                            }
+                        });
+                        return runtime.findNext(this, context);
+                    },
+                };
+            }
+        });
+
         config.conversions.dynamicResolvers.push(function (str, node) {
             if (!(str === "Values" || str.indexOf("Values:") === 0)) {
                 return;

www/test/1.0.0-rc1/test/commands/clear.js

@@ -0,0 +1,58 @@
+describe("the clear command", function () {
+	beforeEach(function () {
+		clearWorkArea();
+	});
+	afterEach(function () {
+		clearWorkArea();
+	});
+
+	it("can clear inner text", function () {
+		var div = make("<div _='on click clear me'>foo</div>");
+        div.innerHTML.should.equal("foo")
+		div.click();
+	    div.innerHTML.should.equal("")
+	});
+
+	it("can clear other inner text", function () {
+		var div = make("<div _='on click clear #that'></div>");
+		var div2 = make("<div id='that'>foo</div>");
+        div2.innerHTML.should.equal("foo")
+		div.click();
+        div2.innerHTML.should.equal("")
+	});
+
+	it("can clear elements", function () {
+		var div = make("<div _='on click clear me'><p>foo</p></div>");
+        div.innerHTML.should.equal("<p>foo</p>")
+		div.click();
+	    div.innerHTML.should.equal("")
+	});
+
+	it("can clear other elements", function () {
+		var div = make("<div _='on click clear #that'></div>");
+		var div2 = make("<div id='that'><p>foo</p></div>");
+        div2.innerHTML.should.equal("<p>foo</p>")
+		div.click();
+        div2.innerHTML.should.equal("")
+	});
+
+	it("can clear parent element", function () {
+		var div = make("<div id='p1'><button  id='b1' _='on click clear my.parentElement'></button></div> ");
+		var btn = byId("b1");
+        div.childElementCount.should.equal(1)
+		btn.click();
+        div.childElementCount.should.equal(0)
+	});
+
+	it("can clear specific things", function () {
+		var div = make("<div><div id='d1' _='on click clear <p/>'><p>foo</p>bar</div><p>doh</p></div>");
+		var d1 = byId('d1');
+		div.innerHTML.includes("foo").should.equal(true);
+		div.innerHTML.includes("bar").should.equal(true);
+		div.innerHTML.includes("doh").should.equal(true);
+		d1.click();
+		div.innerHTML.includes("foo").should.equal(false);
+		div.innerHTML.includes("bar").should.equal(true);
+		div.innerHTML.includes("doh").should.equal(true);
+	});
+});

www/test/1.0.0-rc1/test/index.html

@@ -102,6 +102,7 @@ <h2>Mocha Test Suite</h2>
 		<script src="commands/settle.js"></script>
 		<script src="commands/unlessModifier.js"></script>
 		<script src="commands/increment.js"></script>
+		<script src="commands/clear.js"></script>
 
 		<!-- expressions -->
 		<!--