Merge pull request #193 from AFASSoftware/mem

Memory optimisations - remove the oninput/-value wrapping

Author: johan-gorter

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "maquette",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "description": "Minimalistic Virtual DOM implementation with support for animated transitions.",
   "homepage": "https://maquettejs.org/",
   "keywords": [

package.json

@@ -231,16 +231,6 @@ let setProperties = (
           if (eventHandlerInterceptor) {
             propValue = eventHandlerInterceptor(propName, propValue, domNode, properties); // intercept eventhandlers
           }
-          if (propName === "oninput") {
-            (function () {
-              // record the evt.target.value, because IE and Edge sometimes do a requestAnimationFrame between changing value and running oninput
-              let oldPropValue = propValue;
-              propValue = function (this: HTMLElement, evt: Event) {
-                oldPropValue.apply(this, [evt]);
-                (evt.target as any)["oninput-value"] = (evt.target as HTMLInputElement).value; // may be HTMLTextAreaElement as well
-              };
-            })();
-          }
         }
         (domNode as any)[propName] = propValue;
       } else if (projectionOptions.namespace === NAMESPACE_SVG) {
@@ -443,13 +433,10 @@ let updateProperties = (
         let domValue = (domNode as any)[propName];
         if (
           domValue !== propValue && // The 'value' in the DOM tree !== newValue
-          ((domNode as any)["oninput-value"]
-            ? domValue === (domNode as any)["oninput-value"] // If the last reported value to 'oninput' does not match domValue, do nothing and wait for oninput
-            : propValue !== previousValue) // Only update the value if the vdom changed
+          propValue !== previousValue // Only update the value if the vdom changed
         ) {
           // The edge cases are described in the tests
           (domNode as any)[propName] = propValue; // Reset the value, even if the virtual DOM did not change
-          (domNode as any)["oninput-value"] = undefined;
         } // else do not update the domNode, otherwise the cursor position would be changed
         if (propValue !== previousValue) {
           propertiesUpdated = true;

src/projection.ts

@@ -169,34 +169,6 @@ describe("dom", () => {
     });
 
     describe("event handlers", () => {
-      it("allows one to correct the value while being typed", () => {
-        // Here we are trying to trim the value to 2 characters
-        let typedKeys = "";
-        let handleInput = (evt: Event) => {
-          typedKeys = (evt.target as HTMLInputElement).value.substr(0, 2);
-        };
-        let renderFunction = () => h("input", { value: typedKeys, oninput: handleInput });
-        let projection = dom.create(renderFunction(), {
-          eventHandlerInterceptor: noopEventHandlerInterceptor,
-        });
-        let inputElement = projection.domNode as HTMLInputElement;
-        expect(inputElement.value).to.equal(typedKeys);
-
-        // No correction
-        inputElement.value = "ab";
-        inputElement.oninput({ target: inputElement } as any);
-        expect(typedKeys).to.equal("ab");
-        projection.update(renderFunction());
-        expect(inputElement.value).to.equal("ab");
-
-        // Correction kicking in
-        inputElement.value = "abc";
-        inputElement.oninput({ target: inputElement } as any);
-        expect(typedKeys).to.equal("ab");
-        projection.update(renderFunction());
-        expect(inputElement.value).to.equal("ab");
-      });
-
       it("does not undo keystrokes, even if a browser runs an animationFrame between changing the value property and running oninput", () => {
         // Crazy internet explorer behavior
         let typedKeys = "";