fix(entries): handle circular imports

Closes #513
ionic-team · Feb 12, 2018 · 3f306ac · 3f306ac
1 parent 404b010
commit 3f306ac
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/src/compiler/entries/component-dependencies.ts b/src/compiler/entries/component-dependencies.ts
@@ -13,18 +13,25 @@ export function calcComponentDependencies(moduleFiles: ModuleFiles, moduleGraphs
 
 function getComponentDependencies(moduleGraphs: ModuleGraph[], componentRefs: ComponentReference[], filePath: string, cmpMeta: ComponentMeta) {
   cmpMeta.dependencies = componentRefs.filter(cr => cr.filePath === filePath).map(cr => cr.tag);
+  const importsInspected: string[] = [];
 
   const moduleGraph = moduleGraphs.find(mg => mg.filePath === filePath);
   if (moduleGraph) {
-    getComponentDepsFromImports(moduleGraphs, componentRefs, moduleGraph, cmpMeta);
+    getComponentDepsFromImports(moduleGraphs, componentRefs, importsInspected, moduleGraph, cmpMeta);
   }
 
   cmpMeta.dependencies.sort();
 }
 
 
-function getComponentDepsFromImports(moduleGraphs: ModuleGraph[], componentRefs: ComponentReference[], moduleGraph: ModuleGraph, cmpMeta: ComponentMeta) {
+function getComponentDepsFromImports(moduleGraphs: ModuleGraph[], componentRefs: ComponentReference[], importsInspected: string[], moduleGraph: ModuleGraph, cmpMeta: ComponentMeta) {
   moduleGraph.importPaths.forEach(importPath => {
+    if (importsInspected.includes(importPath)) {
+      return;
+    }
+
+    importsInspected.push(importPath);
+
     const subModuleGraph = moduleGraphs.find(mg => {
       return (mg.filePath === importPath) ||
              (mg.filePath === importPath + '.ts') ||
@@ -35,9 +42,13 @@ function getComponentDepsFromImports(moduleGraphs: ModuleGraph[], componentRefs:
     if (subModuleGraph) {
       const tags = componentRefs.filter(cr => cr.filePath === subModuleGraph.filePath).map(cr => cr.tag);
 
-      cmpMeta.dependencies.push(...tags);
+      tags.forEach(tag => {
+        if (!cmpMeta.dependencies.includes(tag)) {
+          cmpMeta.dependencies.push(tag);
+        }
+      });
 
-      getComponentDepsFromImports(moduleGraphs, componentRefs, subModuleGraph, cmpMeta);
+      getComponentDepsFromImports(moduleGraphs, componentRefs, importsInspected, subModuleGraph, cmpMeta);
     }
   });
 }
diff --git a/src/compiler/transpile/test/transpile.spec.ts b/src/compiler/transpile/test/transpile.spec.ts
@@ -187,6 +187,51 @@ describe('transpile', () => {
       expect(content).toContain(`"str": { "type": String, "attr": "str" }`);
     });
 
+    it('get component dependencies from imports w/ circular dependencies', async () => {
+      c.config.bundles = [ { components: ['cmp-a'] } ];
+      await c.fs.writeFiles({
+        '/src/new-dir/cmp-b.tsx': `@Component({ tag: 'cmp-b' }) export class CmpB {}`,
+        '/src/new-dir/cmp-c.tsx': `@Component({ tag: 'cmp-c' }) export class CmpC {}`,
+        '/src/util-1.tsx': `
+          import { getImportedCmpC } from './util-2';
+          export function getCmpB() {
+            return {
+              'b': document.createElement("cmp-b"),
+              'c': getImportedCmpC()
+            }
+          }
+        `,
+        '/src/util-2.tsx': `
+          import { getCmpB } from './util-1';
+          export function derpCircular() {
+            return getCmpB();
+          }
+          export function getImportedCmpC() {
+            return {
+              'b': document.createElement("cmp-b"),
+              'c': document.createElement("cmp-c")
+            };
+          }
+        `
+      }, { clearFileCache: true });
+
+      await c.fs.writeFile('/src/cmp-a.tsx', `
+        import { getCmpB } from './util-1';
+
+        @Component({ tag: 'cmp-a' }) export class CmpA {
+          componentWillLoad() {
+            getCmpB();
+          }
+        }
+      `, { clearFileCache: true });
+      await c.fs.commit();
+
+      const r = await c.build();
+      expect(r.diagnostics).toEqual([]);
+
+      expect(r.components[0].dependencies).toEqual(['cmp-b', 'cmp-c']);
+    });
+
     it('get component dependencies from imports', async () => {
       c.config.bundles = [ { components: ['cmp-a'] } ];
       await c.fs.writeFiles({