fix(inline-templates): update bundle and memory file representation on template change

update bundle and memory file representation on template change

Author: danbucholtz

src/spec/template.spec.ts

@@ -1,6 +1,6 @@
 import { Logger } from '../logger/logger';
 import { inlineTemplate, replaceTemplateUrl, updateTemplate } from '../template';
-import { getTemplateMatch, getTemplateFormat, replaceBundleJsTemplate } from '../template';
+import { getTemplateMatch, getTemplateFormat, replaceExistingJsTemplate } from '../template';
 import { resolve } from 'path';
 import * as mockFs from 'mock-fs';
 
@@ -178,7 +178,7 @@ describe('template', () => {
         })
       `;
       const newContent = 'some new content';
-      const output = replaceBundleJsTemplate(bundleSourceText, newContent, htmlFilePath);
+      const output = replaceExistingJsTemplate(bundleSourceText, newContent, htmlFilePath);
       expect(output.indexOf(newContent)).toBeGreaterThan(-1);
       expect(output.indexOf(newContent)).toBeGreaterThan(-1);
     });

src/template.ts

@@ -1,7 +1,7 @@
-import { BuildContext, BuildState } from './util/interfaces';
+import { BuildContext, BuildState, File } from './util/interfaces';
 import { Logger } from './logger/logger';
 import { getJsOutputDest } from './bundle';
-import { join, parse, resolve } from 'path';
+import { dirname, extname, join, parse, resolve } from 'path';
 import { readFileSync, writeFile } from 'fs';
 
 
@@ -20,9 +20,10 @@ export function templateUpdate(event: string, htmlFilePath: string, context: Bui
       let bundleSourceText = readFileSync(bundleOutputDest, 'utf8');
       let newTemplateContent = readFileSync(htmlFilePath, 'utf8');
 
-      bundleSourceText = replaceBundleJsTemplate(bundleSourceText, newTemplateContent, htmlFilePath);
+      const successfullyUpdated = updateCorrespondingJsFile(context, newTemplateContent, htmlFilePath);
+      bundleSourceText = replaceExistingJsTemplate(bundleSourceText, newTemplateContent, htmlFilePath);
 
-      if (bundleSourceText) {
+      if (successfullyUpdated && bundleSourceText) {
         // awesome, all good and template updated in the bundle file
         const logger = new Logger(`template update`);
         logger.setStartTime(start);
@@ -35,7 +36,7 @@ export function templateUpdate(event: string, htmlFilePath: string, context: Bui
 
           } else {
             // congrats, all gud
-            Logger.debug(`updateBundledJsTemplate, updated: ${htmlFilePath}`);
+            Logger.debug(`templateUpdate, updated: ${htmlFilePath}`);
             context.templateState = BuildState.SuccessfulBuild;
             logger.finish();
             resolve();
@@ -47,12 +48,23 @@ export function templateUpdate(event: string, htmlFilePath: string, context: Bui
       }
 
     } catch (e) {
-      Logger.debug(`updateBundledJsTemplate error: ${e}`);
+      Logger.debug(`templateUpdate error: ${e}`);
       failed();
     }
   });
 }
 
+function updateCorrespondingJsFile(context: BuildContext, newTemplateContent: string, existingHtmlTemplatePath: string) {
+  const javascriptFiles = context.fileCache.getAll().filter((file: File) => dirname(file.path) === dirname(existingHtmlTemplatePath) && extname(file.path) === '.js');
+  for (const javascriptFile of javascriptFiles) {
+    const newContent = replaceExistingJsTemplate(javascriptFile.content, newTemplateContent, existingHtmlTemplatePath);
+    if (newContent !== javascriptFile.content) {
+      javascriptFile.content = newContent;
+      return true;
+    }
+  }
+  return false;
+}
 
 export function inlineTemplate(sourceText: string, sourcePath: string): string {
   const componentDir = parse(sourcePath).dir;
@@ -105,9 +117,9 @@ export function replaceTemplateUrl(match: TemplateUrlMatch, htmlFilePath: string
 }
 
 
-export function replaceBundleJsTemplate(bundleSourceText: string, newTemplateContent: string, htmlFilePath: string): string {
+export function replaceExistingJsTemplate(existingSourceText: string, newTemplateContent: string, htmlFilePath: string): string {
   let prefix = getTemplatePrefix(htmlFilePath);
-  let startIndex = bundleSourceText.indexOf(prefix);
+  let startIndex = existingSourceText.indexOf(prefix);
 
   let isStringified = false;
 
@@ -116,7 +128,7 @@ export function replaceBundleJsTemplate(bundleSourceText: string, newTemplateCon
     isStringified = true;
   }
 
-  startIndex = bundleSourceText.indexOf(prefix);
+  startIndex = existingSourceText.indexOf(prefix);
   if (startIndex === -1) {
     return null;
   }
@@ -126,24 +138,24 @@ export function replaceBundleJsTemplate(bundleSourceText: string, newTemplateCon
     suffix = stringify(suffix);
   }
 
-  const endIndex = bundleSourceText.indexOf(suffix, startIndex + 1);
+  const endIndex = existingSourceText.indexOf(suffix, startIndex + 1);
   if (endIndex === -1) {
     return null;
   }
 
-  const oldTemplate = bundleSourceText.substring(startIndex, endIndex + suffix.length);
+  const oldTemplate = existingSourceText.substring(startIndex, endIndex + suffix.length);
   let newTemplate = getTemplateFormat(htmlFilePath, newTemplateContent);
 
   if (isStringified) {
     newTemplate = stringify(newTemplate);
   }
 
   let lastChange: string = null;
-  while (bundleSourceText.indexOf(oldTemplate) > -1 && bundleSourceText !== lastChange) {
-    lastChange = bundleSourceText = bundleSourceText.replace(oldTemplate, newTemplate);
+  while (existingSourceText.indexOf(oldTemplate) > -1 && existingSourceText !== lastChange) {
+    lastChange = existingSourceText = existingSourceText.replace(oldTemplate, newTemplate);
   }
 
-  return bundleSourceText;
+  return existingSourceText;
 }
 
 function stringify(str: string) {