fix(compiler): fix static analysis for functional and vdom text

fixes #1903
ionic-team · Oct 4, 2019 · 0901698 · 0901698
1 parent 0bf3877
commit 0901698
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 6 deletions.
diff --git a/src/compiler/transformers/static-to-meta/vdom.ts b/src/compiler/transformers/static-to-meta/vdom.ts
@@ -7,10 +7,8 @@ export const gatherVdomMeta = (m: d.Module | d.ComponentCompilerMeta, args: ts.N
 
   // Parse vdom tag
   const hTag = args[0];
-  if (ts.isIdentifier(hTag)) {
-    if (hTag.text !== 'Host') {
-      m.hasVdomFunctional = true;
-    }
+  if (!ts.isStringLiteral(hTag) && (!ts.isIdentifier(hTag) || hTag.text !== 'Host')) {
+    m.hasVdomFunctional = true;
   }
 
   // Parse attributes
@@ -65,7 +63,8 @@ export const gatherVdomMeta = (m: d.Module | d.ComponentCompilerMeta, args: ts.N
   // Parse children
   if (!m.hasVdomText) {
     for (let i = 2; i < args.length; i++) {
-      if (ts.isStringLiteral(args[i]) || ts.isIdentifier(args[i])) {
+      const arg = args[i];
+      if (!ts.isCallExpression(arg) || !ts.isIdentifier(arg.expression) || (arg.expression.text !== 'h')) {
         m.hasVdomText = true;
         break;
       }

diff --git a/src/compiler/transformers/test/parse-vdom.spec.ts b/src/compiler/transformers/test/parse-vdom.spec.ts
@@ -43,6 +43,20 @@ describe('parse vdom', () => {
     expect(t.cmp.hasVdomFunctional).toBe(true);
   });
 
+  it('hasVdomFunctional (2)', () => {
+    const t = transpileModule(`
+      @Component({tag: 'cmp-a'})
+      export class CmpA {
+        render() {
+          return <Tunnel.Provider/>
+        }
+      }
+    `);
+
+    expect(t.cmp.hasVdomFunctional).toBe(true);
+  });
+
+
   it('hasVdomKey', () => {
     const t = transpileModule(`
       @Component({tag: 'cmp-a'})

diff --git a/src/runtime/test/render-vdom.spec.tsx b/src/runtime/test/render-vdom.spec.tsx
@@ -27,7 +27,7 @@ describe('render-vdom', () => {
       });
     });
 
-    it('dynamic vdomText', async () => {
+    it('vdomText from identifier', async () => {
       @Component({ tag: 'cmp-a'})
       class CmpA {
         render() {
@@ -50,6 +50,52 @@ describe('render-vdom', () => {
       });
     });
 
+    it('vdomText from call expression', async () => {
+      @Component({ tag: 'cmp-a'})
+      class CmpA {
+        render() {
+          const text = () => 'Hello VDOM';
+          return <div>{text()}</div>;
+        }
+      }
+
+      const {build} = await newSpecPage({components: [CmpA], strictBuild: true});
+      expect(build).toMatchObject({
+        vdomAttribute: false,
+        vdomXlink: false,
+        vdomClass: false,
+        vdomStyle: false,
+        vdomKey: false,
+        vdomRef: false,
+        vdomListener: false,
+        vdomFunctional: false,
+        vdomText: true,
+      });
+    });
+
+    it('vdomText from object access', async () => {
+      @Component({ tag: 'cmp-a'})
+      class CmpA {
+        render() {
+          const text = {text: 'Hello VDOM'};
+          return <div>{text.text}</div>;
+        }
+      }
+
+      const {build} = await newSpecPage({components: [CmpA], strictBuild: true});
+      expect(build).toMatchObject({
+        vdomAttribute: false,
+        vdomXlink: false,
+        vdomClass: false,
+        vdomStyle: false,
+        vdomKey: false,
+        vdomRef: false,
+        vdomListener: false,
+        vdomFunctional: false,
+        vdomText: true,
+      });
+    });
+
     it('vdomClass', async () => {
       @Component({ tag: 'cmp-a'})
       class CmpA {
@@ -204,6 +250,31 @@ describe('render-vdom', () => {
       });
     });
 
+    it('vdomFunctional (2)', async () => {
+      @Component({ tag: 'cmp-a'})
+      class CmpA {
+        render() {
+          const Tunnel = {
+            Provider: () => { return; }
+          };
+          return <Tunnel.Provider />;
+        }
+      }
+
+      const {build} = await newSpecPage({components: [CmpA], strictBuild: true});
+      expect(build).toMatchObject({
+        vdomAttribute: false,
+        vdomXlink: false,
+        vdomClass: false,
+        vdomStyle: false,
+        vdomKey: false,
+        vdomRef: false,
+        vdomListener: false,
+        vdomFunctional: true,
+        vdomText: false,
+      });
+    });
+
     it('fallback spread', async () => {
       @Component({ tag: 'cmp-a'})
       class CmpA {