refactor: use the elemental DOM API directly in the client engine

flow-client/src/main/java/com/vaadin/client/ApplicationConnection.java

@@ -25,7 +25,6 @@
 import com.vaadin.client.flow.StateNode;
 import com.vaadin.client.flow.binding.Binder;
 import com.vaadin.client.flow.collection.JsArray;
-import com.vaadin.client.flow.dom.DomApi;
 import com.vaadin.client.flow.util.NativeFunction;
 import com.vaadin.flow.internal.nodefeature.NodeFeatures;
 import com.vaadin.flow.internal.nodefeature.NodeProperties;
@@ -270,7 +269,7 @@ private JavaScriptObject getElementStyleProperties(int id) {
 
     private int getNodeId(Element element) {
         StateNode node = registry.getStateTree()
-                .getStateNodeForDomNode(DomApi.wrap(element));
+                .getStateNodeForDomNode(element);
         return node == null ? -1 : node.getId();
     }
 

flow-client/src/main/java/com/vaadin/client/ExecuteJavaScriptElementUtils.java

@@ -22,7 +22,6 @@
 import com.vaadin.client.flow.collection.JsArray;
 import com.vaadin.client.flow.collection.JsCollections;
 import com.vaadin.client.flow.collection.JsMap;
-import com.vaadin.client.flow.dom.DomApi;
 import com.vaadin.client.flow.model.UpdatableModelProperties;
 import com.vaadin.client.flow.nodefeature.NodeList;
 import com.vaadin.client.flow.nodefeature.NodeMap;
@@ -79,13 +78,12 @@ private ExecuteJavaScriptElementUtils() {
     public static void attachExistingElement(StateNode parent,
             Element previousSibling, String tagName, int id) {
         Element existingElement = null;
-        JsArray<Node> childNodes = DomApi.wrap(parent.getDomNode())
-                .getChildNodes();
+        elemental.dom.NodeList childNodes = parent.getDomNode().getChildNodes();
         JsMap<Node, Integer> indices = new JsMap<>();
         boolean afterSibling = previousSibling == null;
         int elementIndex = -1;
-        for (int i = 0; i < childNodes.length(); i++) {
-            Node node = childNodes.get(i);
+        for (int i = 0; i < childNodes.getLength(); i++) {
+            Node node = childNodes.item(i);
             indices.set(node, i);
             if (node.equals(previousSibling)) {
                 afterSibling = true;

flow-client/src/main/java/com/vaadin/client/PolymerUtils.java

@@ -20,7 +20,6 @@
 import com.vaadin.client.flow.collection.JsCollections;
 import com.vaadin.client.flow.collection.JsSet;
 import com.vaadin.client.flow.collection.JsWeakMap;
-import com.vaadin.client.flow.dom.DomApi;
 import com.vaadin.client.flow.nodefeature.ListSpliceEvent;
 import com.vaadin.client.flow.nodefeature.MapProperty;
 import com.vaadin.client.flow.nodefeature.NodeFeature;
@@ -613,13 +612,13 @@ public static void fireReadyEvent(Element polymerElement) {
     }
 
     private static Node getChildIgnoringStyles(Node parent, int index) {
-        HTMLCollection children = DomApi.wrap(parent).getChildren();
+        HTMLCollection children = ((Element) parent).getChildren();
         int filteredIndex = -1;
         for (int i = 0; i < children.getLength(); i++) {
             Node next = children.item(i);
             assert next instanceof Element
                     : "Unexpected element type in the collection of children. "
-                            + "DomElement::getChildren is supposed to return Element chidren only, but got "
+                            + "Element::getChildren is supposed to return Element chidren only, but got "
                             + next.getClass();
             Element element = (Element) next;
             if (!"style".equalsIgnoreCase(element.getTagName())) {

flow-client/src/main/java/com/vaadin/client/WidgetUtil.java

@@ -20,8 +20,6 @@
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JavaScriptObject;
 
-import com.vaadin.client.flow.dom.DomApi;
-
 import elemental.client.Browser;
 import elemental.dom.Element;
 import elemental.html.AnchorElement;
@@ -155,9 +153,9 @@ public static String toPrettyJson(JsonValue json) {
     public static void updateAttribute(Element element, String attribute,
             String value) {
         if (value == null) {
-            DomApi.wrap(element).removeAttribute(attribute);
+            element.removeAttribute(attribute);
         } else {
-            DomApi.wrap(element).setAttribute(attribute, value);
+            element.setAttribute(attribute, value);
         }
     }
 

flow-client/src/main/java/com/vaadin/client/flow/StateTree.java

@@ -22,7 +22,6 @@
 import com.vaadin.client.flow.collection.JsArray;
 import com.vaadin.client.flow.collection.JsCollections;
 import com.vaadin.client.flow.collection.JsMap;
-import com.vaadin.client.flow.dom.DomNode;
 import com.vaadin.client.flow.nodefeature.MapProperty;
 import com.vaadin.client.flow.nodefeature.NodeList;
 import com.vaadin.client.flow.nodefeature.NodeMap;
@@ -186,7 +185,7 @@ public void setResync(boolean resync) {
      *            the dom node to find state node for
      * @return the state node or null
      */
-    public StateNode getStateNodeForDomNode(DomNode domNode) {
+    public StateNode getStateNodeForDomNode(Node domNode) {
         final JsArray<StateNode> stateNodes = idToNode.mapValues();
         for (int i = 0; i < stateNodes.length(); i++) {
             StateNode stateNode = stateNodes.get(i);

flow-client/src/main/java/com/vaadin/client/flow/binding/SimpleElementBindingStrategy.java

@@ -43,10 +43,6 @@
 import com.vaadin.client.flow.collection.JsMap.ForEachCallback;
 import com.vaadin.client.flow.collection.JsSet;
 import com.vaadin.client.flow.collection.JsWeakMap;
-import com.vaadin.client.flow.dom.DomApi;
-import com.vaadin.client.flow.dom.DomElement;
-import com.vaadin.client.flow.dom.DomElement.DomTokenList;
-import com.vaadin.client.flow.dom.DomNode;
 import com.vaadin.client.flow.model.UpdatableModelProperties;
 import com.vaadin.client.flow.nodefeature.ListSpliceEvent;
 import com.vaadin.client.flow.nodefeature.MapProperty;
@@ -61,6 +57,7 @@
 
 import elemental.client.Browser;
 import elemental.css.CSSStyleDeclaration;
+import elemental.dom.DOMTokenList;
 import elemental.dom.Element;
 import elemental.dom.Node;
 import elemental.events.Event;
@@ -855,7 +852,7 @@ private EventRemover bindChildren(BindingContext context) {
                 context.binderContext.createAndBind(childNode);
             } else {
                 child = context.binderContext.createAndBind(childNode);
-                DomApi.wrap(context.htmlNode).appendChild(child);
+                context.htmlNode.appendChild(child);
             }
         }
 
@@ -1134,8 +1131,8 @@ private void handleChildrenSplice(ListSpliceEvent event,
 
                 assert child != null : "Can't find element to remove";
 
-                if (DomApi.wrap(child).getParentNode() == htmlNode) {
-                    DomApi.wrap(htmlNode).removeChild(child);
+                if (child.getParentNode() == htmlNode) {
+                    htmlNode.removeChild(child);
                 }
                 /*
                  * If the client-side element is not inside the parent the
@@ -1154,9 +1151,8 @@ private void handleChildrenSplice(ListSpliceEvent event,
     }
 
     private void removeAllChildren(Node htmlNode) {
-        DomElement wrap = DomApi.wrap(htmlNode);
-        while (wrap.getFirstChild() != null) {
-            wrap.removeChild(wrap.getFirstChild());
+        while (htmlNode.getFirstChild() != null) {
+            htmlNode.removeChild(htmlNode.getFirstChild());
         }
     }
 
@@ -1171,11 +1167,10 @@ private void removeAllChildren(Node htmlNode) {
     private void removeAllChildrenAfterReplacement(BindingContext context) {
         // getChildNodes returns the live DOM child list, so the nodes to remove
         // are collected before anything is inserted
-        JsArray<Node> liveChildren = DomApi.wrap(context.htmlNode)
-                .getChildNodes();
+        elemental.dom.NodeList liveChildren = context.htmlNode.getChildNodes();
         JsArray<Node> replacedChildren = JsCollections.array();
-        for (int i = 0; i < liveChildren.length(); i++) {
-            replacedChildren.push(liveChildren.get(i));
+        for (int i = 0; i < liveChildren.getLength(); i++) {
+            replacedChildren.push(liveChildren.item(i));
         }
 
         Reactive.addPostFlushListener(
@@ -1196,9 +1191,8 @@ private void removeReplacedChildren(BindingContext context,
              * the new contents, and a node that the server moved to another
              * parent now belongs to that parent. Neither may be removed here.
              */
-            if (!keptChildren.has(child)
-                    && DomApi.wrap(child).getParentNode() == htmlNode) {
-                DomApi.wrap(htmlNode).removeChild(child);
+            if (!keptChildren.has(child) && child.getParentNode() == htmlNode) {
+                htmlNode.removeChild(child);
             }
         }
     }
@@ -1217,8 +1211,7 @@ private void addChildren(int index, BindingContext context,
             StateNode previousSibling = getPreviousSibling(index, context);
             // Insert before the next sibling of the current node
             beforeRef = previousSibling == null ? null
-                    : DomApi.wrap(previousSibling.getDomNode())
-                            .getNextSibling();
+                    : previousSibling.getDomNode().getNextSibling();
         } else {
             // Insert at the end
             beforeRef = null;
@@ -1238,21 +1231,20 @@ private void addChildren(int index, BindingContext context,
             } else {
                 childNode = context.binderContext.createAndBind(newChild);
 
-                DomApi.wrap(context.htmlNode).insertBefore(childNode,
-                        beforeRef);
+                context.htmlNode.insertBefore(childNode, beforeRef);
             }
 
-            beforeRef = DomApi.wrap(childNode).getNextSibling();
+            beforeRef = childNode.getNextSibling();
         }
     }
 
     private static Node getFirstNodeMappedAsStateNode(
             NodeList mappedNodeChildren, Node htmlNode) {
         JsSet<Node> mappedDomNodes = getMappedDomNodes(mappedNodeChildren);
 
-        JsArray<Node> clientList = DomApi.wrap(htmlNode).getChildNodes();
-        for (int i = 0; i < clientList.length(); i++) {
-            Node clientNode = clientList.get(i);
+        elemental.dom.NodeList clientList = htmlNode.getChildNodes();
+        for (int i = 0; i < clientList.getLength(); i++) {
+            Node clientNode = clientList.item(i);
             if (mappedDomNodes.has(clientNode)) {
                 return clientNode;
             }
@@ -1572,12 +1564,11 @@ private EventRemover bindClassList(Element element, StateNode node) {
         NodeList classNodeList = node.getList(NodeFeatures.CLASS_LIST);
 
         for (int i = 0; i < classNodeList.length(); i++) {
-            DomApi.wrap(element).getClassList()
-                    .add((String) classNodeList.get(i));
+            element.getClassList().add((String) classNodeList.get(i));
         }
 
         return classNodeList.addSpliceListener(e -> {
-            DomTokenList classList = DomApi.wrap(element).getClassList();
+            DOMTokenList classList = element.getClassList();
 
             JsArray<?> remove = e.getRemove();
             for (int i = 0; i < remove.length(); i++) {
@@ -1657,7 +1648,7 @@ private int getClosestStateNodeIdToEventTarget(StateNode topNode,
             return -1;
         }
         try {
-            DomNode targetNode = DomApi.wrap(WidgetUtil.crazyJsCast(target));
+            Node targetNode = WidgetUtil.crazyJsCast(target);
             JsArray<StateNode> stack = JsCollections.array();
             stack.push(topNode);
 
@@ -1674,7 +1665,7 @@ private int getClosestStateNodeIdToEventTarget(StateNode topNode,
             }
             // no direct match, all child element state nodes collected.
             // bottom-up search elements until matching state node found
-            targetNode = DomApi.wrap(targetNode.getParentNode());
+            targetNode = targetNode.getParentNode();
             return getStateNodeForElement(stack, targetNode);
         } catch (Exception e) {
             // not going to let event handling fail; just report nothing found
@@ -1687,15 +1678,15 @@ private int getClosestStateNodeIdToEventTarget(StateNode topNode,
     }
 
     private static int getStateNodeForElement(JsArray<StateNode> searchStack,
-            DomNode targetNode) {
+            Node targetNode) {
         while (targetNode != null) {
             for (int i = searchStack.length() - 1; i > -1; i--) {
                 final StateNode stateNode = searchStack.get(i);
                 if (targetNode.isSameNode(stateNode.getDomNode())) {
                     return stateNode.getId();
                 }
             }
-            targetNode = DomApi.wrap(targetNode.getParentNode());
+            targetNode = targetNode.getParentNode();
         }
         return -1;
     }
@@ -1706,15 +1697,14 @@ private int getClosestStateNodeIdToDomNode(StateTree stateTree,
             return -1;
         }
         try {
-            DomNode targetNode = DomApi
-                    .wrap(WidgetUtil.crazyJsCast(domNodeReference));
+            Node targetNode = WidgetUtil.crazyJsCast(domNodeReference);
             while (targetNode != null) {
                 StateNode stateNodeForDomNode = stateTree
                         .getStateNodeForDomNode(targetNode);
                 if (stateNodeForDomNode != null) {
                     return stateNodeForDomNode.getId();
                 }
-                targetNode = DomApi.wrap(targetNode.getParentNode());
+                targetNode = targetNode.getParentNode();
             }
         } catch (Exception e) {
             // not going to let event handling fail; just report nothing found