Merge pull request #7 from yoichiro/dynamic-reloading-for-partials

Dynamic reloading for partials

integration/partials/footer.handlebars

@@ -0,0 +1 @@
+<p>This is footer partial.</p>

integration/templates/template.handlebars

@@ -2,3 +2,5 @@
     <h3>Hello, {{ name }}!</h3>
     {{> message}}
 </section>
+
+{{> footer}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoichiro/vite-plugin-handlebars",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "author": {
     "name": "Yoichiro Tanaka",
     "email": "yoichiro6642@gmail.com",

src/index.ts

@@ -1,8 +1,7 @@
 import { Plugin } from 'vite';
-import Handlebars from 'handlebars';
 import {
-  createPartialMap,
   decideTemplateFileExtension,
+  handleHotUpdate,
   transform,
 } from './internal';
 
@@ -17,22 +16,31 @@ export default function handlebarsPlugin(
   const templateFileExtension = decideTemplateFileExtension(
     options.templateFileExtension
   );
-  const partialMap = createPartialMap(
-    templateFileExtension,
-    options.partialsDirectoryPath
-  );
   return {
     name: '@yoichiro/vite-plugin-handlebars',
     transform(code, id) {
       if (!id.endsWith(templateFileExtension)) {
         return null;
       }
-      const precompiled = Handlebars.precompile(code);
-      const transformed = transform(code, id, partialMap);
+      const transformed = transform(
+        code,
+        id,
+        templateFileExtension,
+        options.partialsDirectoryPath
+      );
       return {
         code: transformed,
         map: null,
       };
     },
+    handleHotUpdate({ file, server }) {
+      if (options.partialsDirectoryPath === undefined) {
+        return;
+      }
+      if (!file.startsWith(options.partialsDirectoryPath)) {
+        return;
+      }
+      handleHotUpdate(file, server);
+    },
   };
 }

src/internal.ts

@@ -1,6 +1,9 @@
 import path from 'path';
 import Handlebars from 'handlebars';
 import fs from 'fs';
+import { ViteDevServer } from 'vite';
+
+let cachePartialMap: { [p: string]: string } | undefined = undefined;
 
 export const decideTemplateFileExtension = (
   templateFileExtension?: string
@@ -31,11 +34,30 @@ export const createPartialMap = (
   );
 };
 
+const getPartialMap = (
+  templateFileExtension: string,
+  partialsDirectoryPath: string | undefined
+): { [p: string]: string } => {
+  return (
+    cachePartialMap ??
+    createPartialMap(templateFileExtension, partialsDirectoryPath)
+  );
+};
+
+const resetPartialMap = (): void => {
+  cachePartialMap = undefined;
+};
+
 export const transform = (
   code: string,
-  id: string,
-  partialMap: { [p: string]: string }
+  _id: string,
+  templateFileExtension: string,
+  partialsDirectoryPath: string | undefined
 ): string => {
+  const partialMap = getPartialMap(
+    templateFileExtension,
+    partialsDirectoryPath
+  );
   const precompiled = Handlebars.precompile(code);
   return `
 import Handlebars from 'handlebars/runtime';
@@ -104,3 +126,12 @@ export const getAllHandlebarsFiles = (
   });
   return arrayOfFiles.sort();
 };
+
+export const handleHotUpdate = (file: string, server: ViteDevServer): void => {
+  resetPartialMap();
+  server.moduleGraph.invalidateAll();
+  server.ws.send({
+    type: 'full-reload',
+    path: '*',
+  });
+};

test/internal.test.ts

@@ -107,7 +107,6 @@ describe('createPartialMap', () => {
   });
 
   test('should return empty map because directory path not specified', () => {
-    const partialDirectoryPath = path.resolve(__dirname, 'assets');
     const actual = createPartialMap('.hbs', undefined);
     expect(Object.keys(actual).length).toEqual(0);
   });