fix(vite-plugin-angular): support watch mode for multiple templateUrls

Closes #257
analogjs · Feb 15, 2023 · 4b61f20 · 4b61f20
1 parent 7bc63e6
commit 4b61f20
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 21 deletions.
diff --git a/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts b/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts
@@ -10,7 +10,7 @@ import {
   hasStyleUrls,
   hasTemplateUrl,
   resolveStyleUrls,
-  resolveTemplateUrl,
+  resolveTemplateUrls,
 } from './component-resolvers';
 import { augmentHostWithResources } from './host';
 
@@ -218,11 +218,11 @@ export function angular(options?: PluginOptions): Plugin[] {
 
           if (watchMode) {
             if (hasTemplateUrl(code)) {
-              const templateUrl = resolveTemplateUrl(code, id);
+              const templateUrls = resolveTemplateUrls(code, id);
 
-              if (templateUrl) {
+              templateUrls.forEach((templateUrl) => {
                 this.addWatchFile(templateUrl);
-              }
+              });
             }
 
             if (hasStyleUrls(code)) {

diff --git a/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts b/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts
@@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest';
 import {
   hasTemplateUrl,
   resolveStyleUrls,
-  resolveTemplateUrl,
+  resolveTemplateUrls,
 } from './component-resolvers';
 
 describe('component-resolvers styleUrls', () => {
@@ -81,10 +81,10 @@ describe('component-resolvers styleUrls', () => {
       `;
 
         const actualUrl = '/path/to/src/app.component.html';
-        const resolvedTemplateUrl = resolveTemplateUrl(code, id);
+        const resolvedTemplateUrls = resolveTemplateUrls(code, id);
 
         expect(hasTemplateUrl(code)).toBeTruthy();
-        expect(resolvedTemplateUrl).toBe(actualUrl);
+        expect(resolvedTemplateUrls[0]).toBe(actualUrl);
       });
 
       it('should handle templateUrls with double quotes', () => {
@@ -96,10 +96,32 @@ describe('component-resolvers styleUrls', () => {
       `;
 
         const actualUrl = '/path/to/src/app.component.html';
-        const resolvedTemplateUrl = resolveTemplateUrl(code, id);
+        const resolvedTemplateUrls = resolveTemplateUrls(code, id);
 
         expect(hasTemplateUrl(code)).toBeTruthy();
-        expect(resolvedTemplateUrl).toBe(actualUrl);
+        expect(resolvedTemplateUrls[0]).toBe(actualUrl);
+      });
+
+      it('should handle multiple templateUrls in a single file', () => {
+        const code = `
+        @Component({
+          templateUrl: "./app.component.html"
+        })
+        export class MyComponent {}
+
+        @Component({
+          templateUrl: "./app1.component.html"
+        })
+        export class MyComponentTwo {}        
+      `;
+
+        const actualUrl1 = '/path/to/src/app.component.html';
+        const actualUrl2 = '/path/to/src/app1.component.html';
+        const resolvedTemplateUrls = resolveTemplateUrls(code, id);
+
+        expect(hasTemplateUrl(code)).toBeTruthy();
+        expect(resolvedTemplateUrls[0]).toBe(actualUrl1);
+        expect(resolvedTemplateUrls[1]).toBe(actualUrl2);
       });
     });
   });

diff --git a/packages/vite-plugin-angular/src/lib/component-resolvers.ts b/packages/vite-plugin-angular/src/lib/component-resolvers.ts
@@ -1,7 +1,7 @@
 import { dirname, resolve } from 'path';
 
 const styleUrlsRE = /styleUrls\s*:\s*\[([^\[]*?)\]/;
-const templateUrlRE = /\s*templateUrl\s*:\s*["|']*?["|'].*/;
+const templateUrlRE = /templateUrl:\s*["'](.*?)["']/g;
 
 export function hasStyleUrls(code: string) {
   return styleUrlsRE.test(code);
@@ -11,27 +11,39 @@ export function resolveStyleUrls(code: string, id: string) {
   const styleUrlsGroup = styleUrlsRE.exec(code);
 
   if (Array.isArray(styleUrlsGroup) && styleUrlsGroup[0]) {
-    const styleUrls = styleUrlsGroup[0].replace(/(styleUrls|\:|\s|\[|\]|"|')/g, '');
+    const styleUrls = styleUrlsGroup[0].replace(
+      /(styleUrls|\:|\s|\[|\]|"|')/g,
+      ''
+    );
     const styleUrlPaths = styleUrls?.split(',') || [];
 
-    return styleUrlPaths.map(styleUrlPath => resolve(dirname(id), styleUrlPath));
+    return styleUrlPaths.map((styleUrlPath) =>
+      resolve(dirname(id), styleUrlPath)
+    );
   }
 
   return [];
 }
 
 export function hasTemplateUrl(code: string) {
-  return templateUrlRE.test(code);
+  return code.includes('templateUrl:');
 }
 
-export function resolveTemplateUrl(code: string, id: string) {
-  const templateUrlGroup = templateUrlRE.exec(code);
+export function resolveTemplateUrls(code: string, id: string) {
+  const templateUrlGroup = Array.from(code.matchAll(templateUrlRE));
+  const templateUrlPaths: string[] = [];
 
-  let templateUrlPath = '';
-  if (Array.isArray(templateUrlGroup) && templateUrlGroup[0]) {
-    const resolvedTemplatePath = templateUrlGroup![0].replace(/templateUrl|\s|'|"|\:|,/g, '');
-    templateUrlPath = resolve(dirname(id), resolvedTemplatePath);
+  if (Array.isArray(templateUrlGroup)) {
+    templateUrlGroup.forEach((trg) => {
+      const resolvedTemplatePath = trg[1].replace(
+        /templateUrl|\s|'|"|\:|,/g,
+        ''
+      );
+      const templateUrlPath = resolve(dirname(id), resolvedTemplatePath);
+
+      templateUrlPaths.push(templateUrlPath);
+    });
   }
 
-  return templateUrlPath;
-}
+  return templateUrlPaths;
+}