From 0d4b8a58f29d20034eb29e7188f2415853c85503 Mon Sep 17 00:00:00 2001
From: Paul Chavard <pro@paul.chavard.net>
Date: Mon, 8 Jul 2024 14:42:32 +0200
Subject: [PATCH] feat(actions): implement reset action

---
 .changeset/hip-hornets-end.md                 |  5 ++++
 packages/actions/src/actions.test.ts          | 27 +++++++++++++++++++
 packages/actions/src/actions.ts               | 21 ++++++++++++---
 .../turbo-stream/src/turbo-stream.test.ts     |  2 +-
 4 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/hip-hornets-end.md

diff --git a/.changeset/hip-hornets-end.md b/.changeset/hip-hornets-end.md
new file mode 100644
index 0000000..208af95
--- /dev/null
+++ b/.changeset/hip-hornets-end.md
@@ -0,0 +1,5 @@
+---
+"@coldwired/actions": patch
+---
+
+implement form reset action
diff --git a/packages/actions/src/actions.test.ts b/packages/actions/src/actions.test.ts
index ebdda03..8d398c7 100644
--- a/packages/actions/src/actions.test.ts
+++ b/packages/actions/src/actions.test.ts
@@ -441,6 +441,33 @@ describe('@coldwired/actions', () => {
     expect(isFocused(from)).toBeTruthy();
   });
 
+  it('should reset form', async () => {
+    actions.morph(
+      document,
+      parseHTMLDocument(
+        '<form id="form-1"><input /> <input value="yolo" /></form> <input form="form-1" /> <input />',
+      ),
+    );
+    const [input1, input2, input3, input4] = document.querySelectorAll('input');
+
+    fireEvent.change(input1, { target: { value: 'test 1' } });
+    fireEvent.change(input3, { target: { value: 'test 3' } });
+    fireEvent.change(input4, { target: { value: 'test 4' } });
+
+    expect(input1.value).toEqual('test 1');
+    expect(input2.value).toEqual('yolo');
+    expect(input3.value).toEqual('test 3');
+    expect(input4.value).toEqual('test 4');
+
+    actions.reset({ targets: '#form-1' });
+    await actions.ready();
+
+    expect(input1.value).toEqual('');
+    expect(input2.value).toEqual('yolo');
+    expect(input3.value).toEqual('');
+    expect(input4.value).toEqual('test 4');
+  });
+
   it('should preserve value', () => {
     actions.morph(
       document,
diff --git a/packages/actions/src/actions.ts b/packages/actions/src/actions.ts
index 5d63431..2f4166f 100644
--- a/packages/actions/src/actions.ts
+++ b/packages/actions/src/actions.ts
@@ -11,6 +11,7 @@ import {
   partition,
   focusNextElement,
   parseHTMLFragment,
+  isFormElement,
 } from '@coldwired/utils';
 
 import { ClassListObserver, ClassListObserverDelegate } from './class-list-observer';
@@ -20,7 +21,7 @@ import { morph } from './morph';
 import { Schema, defaultSchema } from './schema';
 import type { Plugin } from './plugin';
 
-const voidActionNames = ['remove', 'focus', 'enable', 'disable', 'hide', 'show'] as const;
+const voidActionNames = ['remove', 'focus', 'enable', 'disable', 'hide', 'show', 'reset'] as const;
 const fragmentActionNames = ['after', 'before', 'append', 'prepend', 'replace', 'update'] as const;
 const actionNames = [...voidActionNames, ...fragmentActionNames];
 
@@ -113,7 +114,7 @@ export class Actions {
   }
 
   disconnect() {
-    this.reset();
+    this.clear();
     this.#classListObserver.disconnect();
     this.#attributeObserver.disconnect();
     this.#element.removeEventListener('input', this.#delegate);
@@ -121,7 +122,7 @@ export class Actions {
     this.#element.removeEventListener(ACTIONS_EVENT_TYPE, this.#delegate);
   }
 
-  reset() {
+  clear() {
     this.#controller.abort();
     this.#controller = new AbortController();
     this.#pending.clear();
@@ -206,6 +207,10 @@ export class Actions {
     this.applyActions([{ action: 'show', ...params }]);
   }
 
+  reset(params: Omit<VoidAction, 'action'> | Omit<MaterializedVoidAction, 'action'>) {
+    this.applyActions([{ action: 'reset', ...params }]);
+  }
+
   morph(
     from: Element | Document,
     to: string | Element | Document | DocumentFragment,
@@ -442,6 +447,16 @@ export class Actions {
     }
   }
 
+  private _reset({ targets }: Pick<MaterializedVoidAction, 'targets'>) {
+    for (const element of targets) {
+      if (isFormElement(element)) {
+        element.reset();
+      } else {
+        console.warn('reset action is not supported on non-form elements', element);
+      }
+    }
+  }
+
   private handleEvent(event: Event) {
     const target = (event.composedPath && event.composedPath()[0]) || event.target;
 
diff --git a/packages/turbo-stream/src/turbo-stream.test.ts b/packages/turbo-stream/src/turbo-stream.test.ts
index 0b9a184..1ebd268 100644
--- a/packages/turbo-stream/src/turbo-stream.test.ts
+++ b/packages/turbo-stream/src/turbo-stream.test.ts
@@ -138,7 +138,7 @@ describe('@coldwired/turbo-stream', () => {
       expect(end - start).toBeLessThan(20);
       expect(document.body.innerHTML).toBe('<div id="test1"></div><div id="test2"></div>');
     });
-    actions.reset();
+    actions.clear();
     return done;
   });
 });