From 51ba383809cbbb0c81ba7055d025f273d129abbd Mon Sep 17 00:00:00 2001 From: Alessio Civitillo <@acivitillo@dyvenia.com> Date: Thu, 3 Mar 2022 16:49:30 +0100 Subject: [PATCH 1/5] first try to serialize form --- .../packages/idom-client-react/src/event-to-object.js | 8 ++++++++ .../idom-client-react/tests/event-to-object.test.js | 6 ++++++ 2 files changed, 14 insertions(+) diff --git a/src/client/packages/idom-client-react/src/event-to-object.js b/src/client/packages/idom-client-react/src/event-to-object.js index b11e65366..057f344e5 100644 --- a/src/client/packages/idom-client-react/src/event-to-object.js +++ b/src/client/packages/idom-client-react/src/event-to-object.js @@ -49,6 +49,13 @@ const elementTransformCategories = { return {}; } }, + hasElements: (element) => { + const result = {}; + Object.keys(element).forEach((key) => { + result[key] = serializeDomElement(element.elements[key]) + }); + return result; + } }; function defaultElementTransform(element) { @@ -69,6 +76,7 @@ const elementTagCategories = { ], hasCurrentTime: ["AUDIO", "VIDEO"], hasFiles: ["INPUT"], + hasElements: ["FORM"], }; const elementTransforms = {}; diff --git a/src/client/packages/idom-client-react/tests/event-to-object.test.js b/src/client/packages/idom-client-react/tests/event-to-object.test.js index 3dd3852fd..edd81c388 100644 --- a/src/client/packages/idom-client-react/tests/event-to-object.test.js +++ b/src/client/packages/idom-client-react/tests/event-to-object.test.js @@ -76,6 +76,11 @@ const allTargetData = { tagName, output: { target: { currentTime: allTargetData.currentTime } }, })), + ...["FORM"].map((tagName) => ({ + case: `adds 'value' attribute for ${tagName} element`, + tagName, + output: { target: { value: allTargetData.value } }, + })), ].forEach((expectation) => { test(`serializeEvent() ${expectation.case}`, () => { const eventData = { @@ -113,6 +118,7 @@ const allEventData = { clientX: "clientX", clientY: "clientY", ctrlKey: "ctrlKey", + form: "form", metaKey: "metaKey", pageX: "pageX", pageY: "pageY", From 2b070cbe1ee3b2dcef4ae1f8816e2d792e8e3140 Mon Sep 17 00:00:00 2001 From: rmorshea Date: Sun, 6 Mar 2022 11:52:48 -0800 Subject: [PATCH 2/5] fix up form serialization --- .../idom-client-react/src/event-to-object.js | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/src/client/packages/idom-client-react/src/event-to-object.js b/src/client/packages/idom-client-react/src/event-to-object.js index 057f344e5..e35f652e5 100644 --- a/src/client/packages/idom-client-react/src/event-to-object.js +++ b/src/client/packages/idom-client-react/src/event-to-object.js @@ -50,12 +50,19 @@ const elementTransformCategories = { } }, hasElements: (element) => { - const result = {}; - Object.keys(element).forEach((key) => { - result[key] = serializeDomElement(element.elements[key]) - }); - return result; - } + const { elements } = element; + const indices = [...Array(elements.length).keys()]; + return { + elements: indices.map((index) => serializeDomElement(elements[index])), + }; + }, + hasName: (element) => { + const { name } = element; + // In some edge cases, "name" may not be a string. For example, in the case of + // `
`, the "name" attribute of the `
` will + // be the `` element. + return typeof name === "string" ? { name } : {}; + }, }; function defaultElementTransform(element) { @@ -77,6 +84,21 @@ const elementTagCategories = { hasCurrentTime: ["AUDIO", "VIDEO"], hasFiles: ["INPUT"], hasElements: ["FORM"], + hasName: [ + "BUTTON", + "FORM", + "FIELDSET", + "IFRAME", + "INPUT", + "KEYGEN", + "OBJECT", + "OUTPUT", + "SELECT", + "TEXTAREA", + "MAP", + "META", + "PARAM", + ], }; const elementTransforms = {}; From 2e9a91a97038b15b18fc36eb46b867ad366a9df9 Mon Sep 17 00:00:00 2001 From: rmorshea Date: Tue, 29 Nov 2022 22:24:30 -0800 Subject: [PATCH 3/5] fix test --- .../tests/event-to-object.test.js | 77 +++++++++++-------- temp.py | 20 +++++ 2 files changed, 67 insertions(+), 30 deletions(-) create mode 100644 temp.py diff --git a/src/client/packages/idom-client-react/tests/event-to-object.test.js b/src/client/packages/idom-client-react/tests/event-to-object.test.js index edd81c388..596a9dd4e 100644 --- a/src/client/packages/idom-client-react/tests/event-to-object.test.js +++ b/src/client/packages/idom-client-react/tests/event-to-object.test.js @@ -4,22 +4,40 @@ import * as assert from "uvu/assert"; import { serializeEvent } from "../src/event-to-object.js"; import "./tooling/setup.js"; -function assertEqualSerializedEventData(eventData, expectedSerializedData) { - const mockBoundingRect = { - left: 0, - top: 0, - right: 0, - bottom: 0, - x: 0, - y: 0, - width: 0, - }; +const mockBoundingRect = { + left: 0, + top: 0, + right: 0, + bottom: 0, + x: 0, + y: 0, + width: 0, +}; - const mockElement = { - tagName: null, - getBoundingClientRect: () => mockBoundingRect, - }; +const mockElement = { + tagName: null, + getBoundingClientRect: () => mockBoundingRect, +}; + +const allTargetData = { + files: [ + { + lastModified: 0, + name: "something", + type: "some-type", + size: 0, + }, + ], + value: "something", + currentTime: 35, + tagName: null, // overwritten in tests + elements: [ + { ...mockElement, tagName: "INPUT", value: "first" }, + { ...mockElement, tagName: "INPUT", value: "second" }, + ], +}; +function assertEqualSerializedEventData(eventData, expectedSerializedData) { const commonEventData = { target: mockElement, currentTarget: mockElement, @@ -38,20 +56,6 @@ function assertEqualSerializedEventData(eventData, expectedSerializedData) { ); } -const allTargetData = { - files: [ - { - lastModified: 0, - name: "something", - type: "some-type", - size: 0, - }, - ], - value: "something", - currentTime: 35, - tagName: null, // overwritten in tests -}; - [ { case: "adds 'files' and 'value' attributes for INPUT if type=file", @@ -77,9 +81,22 @@ const allTargetData = { output: { target: { currentTime: allTargetData.currentTime } }, })), ...["FORM"].map((tagName) => ({ - case: `adds 'value' attribute for ${tagName} element`, + case: `adds 'elements' attribute for ${tagName} element`, tagName, - output: { target: { value: allTargetData.value } }, + output: { + target: { + elements: [ + { + value: "first", + boundingClientRect: mockBoundingRect, + }, + { + value: "second", + boundingClientRect: mockBoundingRect, + }, + ], + }, + }, })), ].forEach((expectation) => { test(`serializeEvent() ${expectation.case}`, () => { diff --git a/temp.py b/temp.py new file mode 100644 index 000000000..1211bdf64 --- /dev/null +++ b/temp.py @@ -0,0 +1,20 @@ +from idom import component, event, html, run + + +@component +def Form(): + @event(prevent_default=True) + def handle_form(event): + print(event["target"]["elements"]) + + return html.form( + {"onSubmit": handle_form}, + html.input({"name": "firstname"}), + html.p("test"), + html.button({"type": "submit", "value": "Submit"}, "Submit"), + html.input({"lastname": "lastname"}), + html.p("tes2t"), + ) + + +run(Form) From 00f709b3269109184644f40032e892bef8b4c02c Mon Sep 17 00:00:00 2001 From: rmorshea Date: Tue, 29 Nov 2022 22:48:27 -0800 Subject: [PATCH 4/5] add form element serialization --- docs/source/about/changelog.rst | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/source/about/changelog.rst b/docs/source/about/changelog.rst index 7587273ec..3db857a26 100644 --- a/docs/source/about/changelog.rst +++ b/docs/source/about/changelog.rst @@ -25,14 +25,15 @@ Unreleased **Removed** -- :pull:`840` - remove ``IDOM_FEATURE_INDEX_AS_DEFAULT_KEY`` option +- :pull:`840` - Remove ``IDOM_FEATURE_INDEX_AS_DEFAULT_KEY`` option - :pull:`835` - ``serve_static_files`` option from backend configuration **Added** -- :pull:`835` - ability to customize the ```` element of IDOM's built-in client. +- :pull:`835` - Ability to customize the ```` element of IDOM's built-in client. - :pull:`835` - ``vdom_to_html`` utility function. - :pull:`843` - Ability to subscribe to changes that are made to mutable options. +- :pull:`699` - Support for form element serialization **Fixed** From d79b62d52a11475ffcd4bbc340af678ff5353fee Mon Sep 17 00:00:00 2001 From: rmorshea Date: Thu, 1 Dec 2022 09:48:48 -0800 Subject: [PATCH 5/5] delete temp file --- temp.py | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 temp.py diff --git a/temp.py b/temp.py deleted file mode 100644 index 1211bdf64..000000000 --- a/temp.py +++ /dev/null @@ -1,20 +0,0 @@ -from idom import component, event, html, run - - -@component -def Form(): - @event(prevent_default=True) - def handle_form(event): - print(event["target"]["elements"]) - - return html.form( - {"onSubmit": handle_form}, - html.input({"name": "firstname"}), - html.p("test"), - html.button({"type": "submit", "value": "Submit"}, "Submit"), - html.input({"lastname": "lastname"}), - html.p("tes2t"), - ) - - -run(Form)