fix(vdom): render falsy attributes properly

fixes #1780
ionic-team · Aug 6, 2019 · 368aee7 · 368aee7
1 parent 2ef43d1
commit 368aee7
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 11 deletions.
diff --git a/src/compiler/docs/readme/markdown-usage.ts b/src/compiler/docs/readme/markdown-usage.ts
@@ -1,5 +1,5 @@
 import * as d from '../../../declarations';
-import { captializeFirstLetter } from '@utils';
+import { toTitleCase } from '@utils';
 
 export function usageToMarkdown(usages: d.JsonDocsUsage) {
   const content: string[] = [];
@@ -12,7 +12,7 @@ export function usageToMarkdown(usages: d.JsonDocsUsage) {
 
   merged.forEach(({name, text}) => {
     content.push('');
-    content.push(`### ${captializeFirstLetter(name)}`);
+    content.push(`### ${toTitleCase(name)}`);
     content.push('');
     content.push(text);
     content.push('');

diff --git a/src/compiler/types/generate-event-types.ts b/src/compiler/types/generate-event-types.ts
@@ -1,10 +1,10 @@
 import * as d from '../../declarations';
-import { captializeFirstLetter, getTextDocs, isDocsPublic } from '@utils';
+import { getTextDocs, isDocsPublic, toTitleCase } from '@utils';
 
 
 export function generateEventTypes(cmpEvents: d.ComponentCompilerEvent[]): d.TypeInfo {
   return cmpEvents.map(cmpEvent => {
-    const name = `on${captializeFirstLetter(cmpEvent.name)}`;
+    const name = `on${toTitleCase(cmpEvent.name)}`;
     const type = (cmpEvent.complexType.original) ? `(event: CustomEvent<${cmpEvent.complexType.original}>) => void` : `CustomEvent`;
     return {
       name,

diff --git a/src/mock-doc/node.ts b/src/mock-doc/node.ts
@@ -479,7 +479,7 @@ export class MockElement extends MockNode {
         if (attributes.caseInsensitive) {
           attrName = attrName.toLowerCase();
         }
-        attr = new MockAttr(attrName, value);
+        attr = new MockAttr(attrName, String(value));
         attributes.items.push(attr);
 
         if (checkAttrChanged === true) {

diff --git a/src/mock-doc/test/element.spec.ts b/src/mock-doc/test/element.spec.ts
@@ -214,6 +214,25 @@ describe('element', () => {
       testNsAttributes(element);
     });
 
+    it('should cast attribute values to string', () => {
+      const element = new MockHTMLElement(doc, 'div');
+      element.setAttribute('prop1', null);
+      element.setAttribute('prop2', undefined);
+      element.setAttribute('prop3', 0);
+      element.setAttribute('prop4', 1);
+      element.setAttribute('prop5', 'hola');
+      element.setAttribute('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/test/render-vdom.spec.tsx b/src/runtime/test/render-vdom.spec.tsx
@@ -364,6 +364,27 @@ describe('render-vdom', () => {
     });
   });
 
+  describe('native elements', () => {
+    it('should render <input> correctly', async () => {
+      @Component({ tag: 'cmp-a'})
+      class CmpA {
+        render() {
+          return <input min={0} max={10} value={5}/>;
+        }
+      }
+
+      const { root } = await newSpecPage({
+        components: [CmpA],
+        html: `<cmp-a></cmp-a>`,
+      });
+
+      expect(root).toEqualHtml(`
+        <cmp-a>
+          <input max=\"10\" min=\"0\" value=\"5\">
+        </cmp-a>`);
+    });
+  });
+
   describe('ref property', () => {
     it('should set on Host', async () => {
       @Component({ tag: 'cmp-a'})

diff --git a/src/runtime/vdom/set-accessor.ts b/src/runtime/vdom/set-accessor.ts
@@ -87,10 +87,13 @@ export const setAccessor = (elm: HTMLElement, memberName: string, oldValue: any,
     const isCustomElement = elm.tagName.includes('-');
     if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
       try {
-        if (isCustomElement) {
+        if (!isCustomElement) {
+          newValue = newValue == null ? '' : newValue;
+          if ((elm as any)[memberName] !== newValue) {
+            (elm as any)[memberName] = newValue;
+          }
+        } else {
           (elm as any)[memberName] = newValue;
-        } else if ((elm as any)[memberName] !== newValue || '') {
-          (elm as any)[memberName] = newValue || '';
         }
       } catch (e) {}
     }

diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -9,9 +9,7 @@ export const toDashCase = (str: string) => toLowerCase(str.replace(/([A-Z0-9])/g
 
 export const dashToPascalCase = (str: string) => toLowerCase(str).split('-').map(segment => segment.charAt(0).toUpperCase() + segment.slice(1)).join('');
 
-export const toTitleCase = (str: string) => str.charAt(0).toUpperCase() + str.substr(1);
-
-export const captializeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+export const toTitleCase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
 export const noop = (): any => { /* noop*/ };