Support Partials and watch ejs files

Author: trapcodeio

index.ts

@@ -1,14 +1,15 @@
-import {Plugin, ResolvedConfig} from "vite";
+import {Plugin, ResolvedConfig, UserConfig} from "vite";
 import ejs from "ejs";
 
 // ShortHand for EjsOptions or Undefined
-type EjsRenderOptions = (ejs.Options & { async: false }) | undefined;
+type EjsRenderOptions = ejs.Options & { async?: false };
+type EjsRenderOptionsFn = (config: ResolvedConfig) => EjsRenderOptions;
 type ViteEjsPluginDataType = Record<string, any> | ((config: ResolvedConfig) => Record<string, any>);
-type ViteEjsPluginOptions = {ejs: EjsRenderOptions};
+type ViteEjsPluginOptions = { watchEjsFiles?: boolean, ejs?: EjsRenderOptions | EjsRenderOptionsFn };
 
 /**
  * Vite Ejs Plugin Function
- *
+ * See https://github.com/trapcodeio/vite-plugin-ejs for more information
  * @example
  * export default defineConfig({
  *  plugins: [
@@ -23,8 +24,13 @@ function ViteEjsPlugin(data: ViteEjsPluginDataType = {}, options?: ViteEjsPlugin
     return {
         name: "vite-plugin-ejs",
 
+        config(config) {
+            // Add .ejs extension to watch files.
+            if (options && options.watchEjsFiles) WatchEjsFiles(config);
+        },
+
         // Get Resolved config
-        configResolved(resolvedConfig){
+        configResolved(resolvedConfig) {
             config = resolvedConfig;
         },
 
@@ -34,6 +40,9 @@ function ViteEjsPlugin(data: ViteEjsPluginDataType = {}, options?: ViteEjsPlugin
                 // config.isProduction
                 try {
                     if (typeof data === "function") data = data(config);
+                    let ejsOptions = options && options.ejs ? options.ejs : {};
+                    if (typeof ejsOptions === "function") ejsOptions = ejsOptions(config);
+
 
                     html = ejs.render(
                         html,
@@ -42,7 +51,11 @@ function ViteEjsPlugin(data: ViteEjsPluginDataType = {}, options?: ViteEjsPlugin
                             isDev: config.mode === "development",
                             ...data
                         },
-                        options?.ejs
+                        {
+                            views: [config.root], // Set views directory that can be overwritten
+                            ...ejsOptions,
+                            async: false // Force sync
+                        }
                     );
                 } catch (e: any) {
                     return e.message;
@@ -54,4 +67,21 @@ function ViteEjsPlugin(data: ViteEjsPluginDataType = {}, options?: ViteEjsPlugin
     };
 }
 
+
+function WatchEjsFiles(config: UserConfig) {
+    // Add .ejs extension to watch files.
+    // get watch config
+    let watch = config.build ? config.build.watch : {};
+
+    // if none is defined, set to empty object
+    if (!watch) watch = {}
+    // check if watch.include is defined and if not, set to empty array
+    if (!watch.include) watch.include = [];
+    // if watch.include is not an array then convert to array
+    if (!Array.isArray(watch.include)) watch.include = [watch.include];
+
+    // Add ejs files to watch list
+    watch.include.push("**/*.ejs");
+}
+
 export {ViteEjsPlugin, ejs}

readme.md

@@ -2,7 +2,14 @@
 
 Use [ejs](https://www.npmjs.com/package/ejs) template language in your entrypoint i.e `index.html`
 
-### Install
+## Menu
+
+- [Installation](#installation)
+- [Usage](#usage)
+    - [Default Data](#default-data)
+    - [Configure EJS](#configure-ejs)
+
+### Installation
 
 ```sh
 npm i vite-plugin-ejs
@@ -69,7 +76,7 @@ File: **index.html**
 
 Note: `isDev` is included in your data by default
 
-### Default data
+### Default Data
 
 The object below is the default data of the render function.
 
@@ -79,3 +86,50 @@ return {
   isDev: config.mode === "development"
 }
 ```
+
+## Configuration
+
+The `ViteEjsPlugin` has 2 configuration
+
+- `watchEjsFiles` - default: `false` - Watch for changes in ejs files and re-render the entrypoint
+- `ejsOptions` - default: `{views: [viteConfig.root]}` - Options for the ejs render function
+
+
+### Configure EJS
+
+You can configure ejs by passing an object to the plugin.
+
+```js   
+export default defineConfig({
+  plugins: [
+    ViteEjsPlugin(
+        {title: 'My vue project!'},
+        {
+          ejs: {
+            // ejs options goes here.
+            beautify: true,
+          },
+        }
+    ),
+  ],
+});
+```
+
+If you want to use `viteconfig` to configure ejs, you can pass a function to the plugin, the function will receive the
+current vite config as the first argument.
+
+```js
+export default defineConfig({
+  plugins: [
+    ViteEjsPlugin(
+        {title: 'My vue project!'},
+        {
+          ejs: (viteConfig) => ({
+            // ejs options goes here.
+            views: [viteConfig.publicDir]
+          })
+        }
+    ),
+  ],
+});
+```