feat(): support mixed case events (#1856)

manucorporat · web-flow · commit 972ce3f93c68 · 2019-09-10T12:53:00.000+02:00
diff --git a/src/client/client-host-ref.ts b/src/client/client-host-ref.ts
@@ -27,5 +27,4 @@ export const registerHost = (elm: d.HostElement) => {
     });
   }
 };
-
 export const isMemberInElement = (elm: any, memberName: string) => memberName in elm;
diff --git a/src/mock-doc/attribute.ts b/src/mock-doc/attribute.ts
@@ -105,9 +105,9 @@ export class MockAttr {
   private _value: string;
   private _namespaceURI: string;
 
-  constructor(attrName: string, attrValue = '', namespaceURI: string = null) {
+  constructor(attrName: string, attrValue: string, namespaceURI: string = null) {
     this._name = attrName;
-    this._value = String(attrValue || '');
+    this._value = String(attrValue);
     this._namespaceURI = namespaceURI;
   }
 
@@ -122,7 +122,7 @@ export class MockAttr {
     return this._value;
   }
   set value(value) {
-    this._value = String(value || '');
+    this._value = String(value);
   }
 
   get nodeName() {
@@ -136,7 +136,7 @@ export class MockAttr {
     return this._value;
   }
   set nodeValue(value) {
-    this._value = String(value || '');
+    this._value = String(value);
   }
 
   get namespaceURI() {
diff --git a/src/mock-doc/document.ts b/src/mock-doc/document.ts
@@ -153,11 +153,11 @@ export class MockDocument extends MockHTMLElement {
   }
 
   createAttribute(attrName: string) {
-    return new MockAttr(attrName.toLowerCase());
+    return new MockAttr(attrName.toLowerCase(), '');
   }
 
   createAttributeNS(namespaceURI: string, attrName: string) {
-    return new MockAttr(attrName, undefined, namespaceURI);
+    return new MockAttr(attrName, '', namespaceURI);
   }
 
   createElement(tagName: string) {
diff --git a/src/mock-doc/node.ts b/src/mock-doc/node.ts
@@ -473,20 +473,20 @@ export class MockElement extends MockNode {
       if (attr != null) {
         if (checkAttrChanged === true) {
           const oldValue = attr.value;
-          attr.value = String(value);
+          attr.value = value;
 
           if (oldValue !== attr.value) {
             attributeChanged(this, attr.name, oldValue, attr.value);
           }
         } else {
-          attr.value = String(value);
+          attr.value = value;
         }
 
       } else {
         if (attributes.caseInsensitive) {
           attrName = attrName.toLowerCase();
         }
-        attr = new MockAttr(attrName, String(value));
+        attr = new MockAttr(attrName, value);
         attributes.items.push(attr);
 
         if (checkAttrChanged === true) {
@@ -504,13 +504,13 @@ export class MockElement extends MockNode {
     if (attr != null) {
       if (checkAttrChanged === true) {
         const oldValue = attr.value;
-        attr.value = String(value);
+        attr.value = value;
 
         if (oldValue !== attr.value) {
           attributeChanged(this, attr.name, oldValue, attr.value);
         }
       } else {
-        attr.value = String(value);
+        attr.value = value;
       }
 
     } else {
diff --git a/src/mock-doc/test/element.spec.ts b/src/mock-doc/test/element.spec.ts
@@ -233,6 +233,25 @@ describe('element', () => {
       expect(element).toEqualHtml(`<div prop1=\"null\" prop2=\"undefined\" prop3=\"0\" prop4=\"1\" prop5=\"hola\" prop6></div>`);
     });
 
+    it('should cast attributeNS values to string', () => {
+      const element = new MockHTMLElement(doc, 'div');
+      element.setAttributeNS(null, 'prop1', null);
+      element.setAttributeNS(null, 'prop2', undefined);
+      element.setAttributeNS(null, 'prop3', 0);
+      element.setAttributeNS(null, 'prop4', 1);
+      element.setAttributeNS(null, 'prop5', 'hola');
+      element.setAttributeNS(null, 'prop6', '');
+
+      expect(element.getAttribute('prop1')).toBe('null');
+      expect(element.getAttribute('prop2')).toBe('undefined');
+      expect(element.getAttribute('prop3')).toBe('0');
+      expect(element.getAttribute('prop4')).toBe('1');
+      expect(element.getAttribute('prop5')).toBe('hola');
+      expect(element.getAttribute('prop6')).toBe('');
+
+      expect(element).toEqualHtml(`<div prop1=\"null\" prop2=\"undefined\" prop3=\"0\" prop4=\"1\" prop5=\"hola\" prop6></div>`);
+    });
+
     it('attributes are case insensible in HTMLElement', () => {
       const element = new MockHTMLElement(doc, 'div');
 
diff --git a/src/runtime/client-hydrate.ts b/src/runtime/client-hydrate.ts
@@ -2,7 +2,6 @@ import * as d from '../declarations';
 import { BUILD } from '@build-conditionals';
 import { CONTENT_REF_ID, HYDRATE_CHILD_ID, HYDRATE_ID, NODE_TYPE, ORG_LOCATION_ID, SLOT_NODE_ID, TEXT_NODE_ID } from './runtime-constants';
 import { doc, plt } from '@platform';
-import { toLowerCase } from '@utils';
 
 
 export const initializeClientHydrate = (hostElm: d.HostElement, tagName: string, hostId: string, hostRef: d.HostRef) => {
@@ -86,7 +85,7 @@ const clientHydrate = (
           $nodeId$: childIdSplt[1],
           $depth$: childIdSplt[2],
           $index$: childIdSplt[3],
-          $tag$: toLowerCase(node.tagName),
+          $tag$: node.tagName.toLowerCase(),
           $elm$: node
         };
 
diff --git a/src/runtime/test/jsx.spec.tsx b/src/runtime/test/jsx.spec.tsx
@@ -1,5 +1,6 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Prop, h, Host, State } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
+import { CmpA } from 'fixtures/cmp-a';
 
 
 describe('jsx', () => {
@@ -33,4 +34,81 @@ describe('jsx', () => {
       </cmp-a>
     `);
   });
+
+  describe('event', () => {
+    @Component({ tag: 'cmp-a'})
+    class CmpA {
+      @State() lastEvent: any;
+      render() {
+        return (
+          <Host
+            onClick={() => this.lastEvent = 'onClick'}
+            on-Click={() => this.lastEvent = 'on-Click'}
+            on-scroll={() => this.lastEvent = 'on-scroll'}
+            onIonChange={() => this.lastEvent = 'onIonChange'}
+            on-IonChange={() => this.lastEvent = 'on-IonChange'}
+            on-ALLCAPS={() => this.lastEvent = 'on-ALLCAPS'}
+          >{this.lastEvent}</Host>
+        );
+      }
+    }
+
+    it('click', async () => {
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`
+      });
+      root.dispatchEvent(new CustomEvent('click'));
+      await waitForChanges();
+      expect(root.textContent).toBe('onClick');
+    });
+
+    it('Click', async () => {
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`
+      });
+      root.dispatchEvent(new CustomEvent('Click'));
+      await waitForChanges();
+      expect(root.textContent).toBe('on-Click');
+    });
+
+    it('scroll', async () => {
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`
+      });
+      root.dispatchEvent(new CustomEvent('scroll'));
+      await waitForChanges();
+      expect(root.textContent).toBe('on-scroll');
+    });
+    it('ionChange', async () => {
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`
+      });
+      root.dispatchEvent(new CustomEvent('ionChange'));
+      await waitForChanges();
+      expect(root.textContent).toBe('onIonChange');
+    });
+    it('IonChange', async () => {
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`
+      });
+      root.dispatchEvent(new CustomEvent('IonChange'));
+      await waitForChanges();
+      expect(root.textContent).toBe('on-IonChange');
+    });
+    it('ALLCAPS', async () => {
+      const { root, waitForChanges } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`
+      });
+      root.dispatchEvent(new CustomEvent('ALLCAPS'));
+      await waitForChanges();
+      expect(root.textContent).toBe('on-ALLCAPS');
+    });
+  });
+
 });
diff --git a/src/runtime/vdom/set-accessor.ts b/src/runtime/vdom/set-accessor.ts
@@ -9,17 +9,20 @@
 
 import { BUILD } from '@build-conditionals';
 import { isMemberInElement, plt } from '@platform';
-import { isComplexType, toLowerCase } from '@utils';
+import { isComplexType } from '@utils';
 import { VNODE_FLAGS, XLINK_NS } from '../runtime-constants';
 
 export const setAccessor = (elm: HTMLElement, memberName: string, oldValue: any, newValue: any, isSvg: boolean, flags: number) => {
   if (oldValue === newValue) {
     return;
   }
+  let isProp = isMemberInElement(elm, memberName);
+  let ln = memberName.toLowerCase();
   if (BUILD.vdomClass && memberName === 'class') {
     const classList = elm.classList;
     parseClassList(oldValue).forEach(cls => classList.remove(cls));
     parseClassList(newValue).forEach(cls => classList.add(cls));
+
   } else if (BUILD.vdomStyle && memberName === 'style') {
     // update style attribute, css properties and values
     if (BUILD.updatable) {
@@ -52,26 +55,34 @@ export const setAccessor = (elm: HTMLElement, memberName: string, oldValue: any,
       newValue(elm);
     }
 
-  } else if (BUILD.vdomListener && memberName.startsWith('on') && !isMemberInElement(elm, memberName)) {
+  } else if (BUILD.vdomListener && !isProp && memberName[0] === 'o' && memberName[1] === 'n') {
     // Event Handlers
     // so if the member name starts with "on" and the 3rd characters is
     // a capital letter, and it's not already a member on the element,
     // then we're assuming it's an event listener
-
-    if (isMemberInElement(elm, toLowerCase(memberName))) {
+    if (memberName[2] === '-') {
+      // on- prefixed events
+      // allows to be explicit about the dom event to listen without any magic
+      // under the hood:
+      // <my-cmp on-click> // listens for "click"
+      // <my-cmp on-Click> // listens for "Click"
+      // <my-cmp on-ionChange> // listens for "ionChange"
+      // <my-cmp on-EVENTS> // listens for "EVENTS"
+      memberName = memberName.substr(3);
+    } else if (isMemberInElement(elm, ln)) {
       // standard event
       // the JSX attribute could have been "onMouseOver" and the
       // member name "onmouseover" is on the element's prototype
       // so let's add the listener "mouseover", which is all lowercased
-      memberName = toLowerCase(memberName.substring(2));
+      memberName = ln.substr(2);
 
     } else {
       // custom event
       // the JSX attribute could have been "onMyCustomEvent"
       // so let's trim off the "on" prefix and lowercase the first character
       // and add the listener "myCustomEvent"
       // except for the first character, we keep the event name case
-      memberName = toLowerCase(memberName[2]) + memberName.substring(3);
+      memberName = ln[2] + memberName.substr(3);
     }
     if (oldValue) {
       plt.rel(elm, memberName, oldValue, false);
@@ -82,8 +93,18 @@ export const setAccessor = (elm: HTMLElement, memberName: string, oldValue: any,
 
   } else {
     // Set property if it exists and it's not a SVG
-    const isProp = isMemberInElement(elm, memberName);
     const isComplex = isComplexType(newValue);
+
+    /**
+     * Need to manually update attribute if:
+     * - memberName is not an attribute
+     * - if we are rendering the host element in order to reflect attribute
+     * - if it's a SVG, since properties might not work in <svg>
+     * - if the newValue is null/undefined or 'false'.
+     */
+    const namespace = BUILD.svg && isSvg && (ln !== (ln = ln.replace(/^xlink\:?/, '')))
+      ? XLINK_NS
+      : null;
     if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
       try {
         if (!elm.tagName.includes('-')) {
@@ -99,28 +120,11 @@ export const setAccessor = (elm: HTMLElement, memberName: string, oldValue: any,
       } catch (e) {}
     }
 
-
-    /**
-     * Need to manually update attribute if:
-     * - memberName is not an attribute
-     * - if we are rendering the host element in order to reflect attribute
-     * - if it's a SVG, since properties might not work in <svg>
-     * - if the newValue is null/undefined or 'false'.
-     */
-    const isXlinkNs = BUILD.svg && isSvg && (memberName !== (memberName = memberName.replace(/^xlink\:?/, ''))) ? true : false;
     if (newValue == null || newValue === false) {
-      if (isXlinkNs) {
-        elm.removeAttributeNS(XLINK_NS, toLowerCase(memberName));
-      } else {
-        elm.removeAttribute(memberName);
-      }
+      elm.removeAttributeNS(namespace, ln);
     } else if ((!isProp || (flags & VNODE_FLAGS.isHost) || isSvg) && !isComplex) {
-      newValue = newValue === true ? '' : newValue.toString();
-      if (isXlinkNs) {
-        elm.setAttributeNS(XLINK_NS, toLowerCase(memberName), newValue);
-      } else {
-        elm.setAttribute(memberName, newValue);
-      }
+      newValue = newValue === true ? '' : newValue;
+      elm.setAttributeNS(namespace, ln, newValue);
     }
   }
 };
diff --git a/src/runtime/vdom/test/attributes.spec.ts b/src/runtime/vdom/test/attributes.spec.ts
@@ -37,6 +37,13 @@ describe('attributes', () => {
     expect(hostElm.getAttributeNS(XLINK_NS, 'href')).toEqual('#foo');
   });
 
+
+  it('are set correctly when namespaced (2)', () => {
+    const vnode1 = h('svg', { 'xlinkHref': '#foo' });
+    patch(vnode0, vnode1);
+    expect(hostElm.getAttributeNS(XLINK_NS, 'href')).toEqual('#foo');
+  });
+
   it('should not touch class nor id fields', () => {
     hostElm = document.createElement('div');
     hostElm.id = 'myId';
diff --git a/src/runtime/vdom/vdom-render.ts b/src/runtime/vdom/vdom-render.ts
@@ -8,7 +8,7 @@
  */
 import * as d from '../../declarations';
 import { BUILD } from '@build-conditionals';
-import { CMP_FLAGS, SVG_NS, isDef, toLowerCase } from '@utils';
+import { CMP_FLAGS, SVG_NS, isDef } from '@utils';
 import { consoleError, doc, plt, supportsShadowDom } from '@platform';
 import { h, isHost } from './h';
 import { NODE_TYPE, PLATFORM_FLAGS, VNODE_FLAGS } from '../runtime-constants';
@@ -67,7 +67,7 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
 
   } else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
     // create a slot reference node
-    newVNode.$elm$ = (BUILD.isDebug || BUILD.hydrateServerSide) ? doc.createComment(`slot-reference:${hostTagName}`) : doc.createTextNode('') as any;
+    newVNode.$elm$ = (BUILD.isDebug || BUILD.hydrateServerSide) ? doc.createComment(`slot-reference:${hostTagName.toLowerCase()}`) : doc.createTextNode('') as any;
 
   } else {
     // create element
@@ -184,7 +184,7 @@ const addVnodes = (
 ) => {
   let containerElm = ((BUILD.slotRelocation && parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm) as any;
   let childNode: Node;
-  if (BUILD.shadowDom && (containerElm as any).shadowRoot && toLowerCase(containerElm.tagName) === hostTagName) {
+  if (BUILD.shadowDom && (containerElm as any).shadowRoot && containerElm.tagName === hostTagName) {
     containerElm = (containerElm as any).shadowRoot;
   }
 
@@ -568,11 +568,11 @@ interface RelocateNode {
 }
 
 export const renderVdom = (hostElm: d.HostElement, hostRef: d.HostRef, cmpMeta: d.ComponentRuntimeMeta, renderFnResults: d.VNode | d.VNode[]) => {
-  hostTagName = toLowerCase(hostElm.tagName);
+  hostTagName = hostElm.tagName;
   // <Host> runtime check
   if (BUILD.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) {
     throw new Error(`The <Host> must be the single root component.
-Looks like the render() function of "${hostTagName}" is returning an array that contains the <Host>.
+Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
 
 The render() function should look like this instead:
 

Original file line number	Diff line number	Diff line change
`@@ -27,5 +27,4 @@ export const registerHost = (elm: d.HostElement) => {`
`27`	`27`	`});`
`28`	`28`	`}`
`29`	`29`	`};`
`30`		`-`
`31`	`30`	`export const isMemberInElement = (elm: any, memberName: string) => memberName in elm;`
Original file line number	Diff line number	Diff line change
`@@ -105,9 +105,9 @@ export class MockAttr {`
`105`	`105`	`private _value: string;`
`106`	`106`	`private _namespaceURI: string;`
`107`	`107`
`108`		`- constructor(attrName: string, attrValue = '', namespaceURI: string = null) {`
	`108`	`+ constructor(attrName: string, attrValue: string, namespaceURI: string = null) {`
`109`	`109`	`this._name = attrName;`
`110`		`- this._value = String(attrValue \|\| '');`
	`110`	`+ this._value = String(attrValue);`
`111`	`111`	`this._namespaceURI = namespaceURI;`
`112`	`112`	`}`
`113`	`113`
`@@ -122,7 +122,7 @@ export class MockAttr {`
`122`	`122`	`return this._value;`
`123`	`123`	`}`
`124`	`124`	`set value(value) {`
`125`		`- this._value = String(value \|\| '');`
	`125`	`+ this._value = String(value);`
`126`	`126`	`}`
`127`	`127`
`128`	`128`	`get nodeName() {`
`@@ -136,7 +136,7 @@ export class MockAttr {`
`136`	`136`	`return this._value;`
`137`	`137`	`}`
`138`	`138`	`set nodeValue(value) {`
`139`		`- this._value = String(value \|\| '');`
	`139`	`+ this._value = String(value);`
`140`	`140`	`}`
`141`	`141`
`142`	`142`	`get namespaceURI() {`
Original file line number	Diff line number	Diff line change
`@@ -153,11 +153,11 @@ export class MockDocument extends MockHTMLElement {`
`153`	`153`	`}`
`154`	`154`
`155`	`155`	`createAttribute(attrName: string) {`
`156`		`- return new MockAttr(attrName.toLowerCase());`
	`156`	`+ return new MockAttr(attrName.toLowerCase(), '');`
`157`	`157`	`}`
`158`	`158`
`159`	`159`	`createAttributeNS(namespaceURI: string, attrName: string) {`
`160`		`- return new MockAttr(attrName, undefined, namespaceURI);`
	`160`	`+ return new MockAttr(attrName, '', namespaceURI);`
`161`	`161`	`}`
`162`	`162`
`163`	`163`	`createElement(tagName: string) {`