html-express-js 4.2.1 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-express-js",
-  "version": "4.2.1",
+  "version": "5.0.0",
   "description": "An Express template engine to render HTML views using native JavaScript",
   "main": "src/index.js",
   "type": "module",
@@ -51,23 +51,23 @@
   },
   "homepage": "https://github.com/markcellus/html-express-js#readme",
   "dependencies": {
-    "glob": "^11.0.0"
+    "glob": "^13.0.6"
   },
   "devDependencies": {
-    "@types/chai": "^5.0.0",
-    "@types/express": "^5.0.0",
-    "@types/mocha": "^10.0.6",
+    "@types/chai": "^5.2.3",
+    "@types/express": "^5.0.6",
+    "@types/mocha": "^10.0.10",
     "@types/reload": "^3.2.3",
-    "@types/sinon": "^17.0.3",
-    "chai": "^6.0.1",
-    "chokidar": "^4.0.1",
-    "express": "^5.1.0",
-    "husky": "^9.0.7",
-    "mocha": "^11.0.1",
-    "prettier": "^3.0.3",
-    "release-it": "19.0.4",
-    "reload": "^3.2.0",
-    "sinon": "^21.0.0",
-    "typescript": "^5.4.3"
+    "@types/sinon": "^21.0.1",
+    "chai": "^6.2.2",
+    "chokidar": "^5.0.0",
+    "express": "^5.2.1",
+    "husky": "^9.1.7",
+    "mocha": "^11.7.5",
+    "prettier": "^3.8.1",
+    "release-it": "19.2.4",
+    "reload": "^3.4.3",
+    "sinon": "^21.0.3",
+    "typescript": "^6.0.2"
   }
 }

package/src/index.d.ts

@@ -1,13 +1,31 @@
+/**
+ * Generates HTML for the provided view and adds all includes to state object.
+ *
+ * @param {string | HTMLExpressView} view - The view function or path to view file
+ * @param {import('express').Request} req - The request to build the state from
+ * @param {Record<string, any>} [data] - Data provided to the view
+ * @returns {Promise<string>} HTML with includes available (appended to state)
+ */
+export function buildStateViewHtml(view: string | HTMLExpressView, req: import("express").Request, data?: Record<string, any>): Promise<string>;
 /**
  * Renders a JS HTML file and adds all includes to state object.
  *
- * @param {string} filePath - The path to html file
+ * @param {string | HTMLExpressView} view - The path to html file
  * @param {import('express').Request} req
  * @param {import('express').Response} res
  * @param {Record<string, any>} [data]
  * @returns {Promise<string>} HTML with includes available (appended to state)
  */
-export function renderView(filePath: string, req: import("express").Request, res: import("express").Response, data?: Record<string, any>): Promise<string>;
+export function renderView(view: string | HTMLExpressView, req: import("express").Request, res: import("express").Response, data?: Record<string, any>): Promise<string>;
+/**
+ * Renders a JS HTML file and adds all includes to state object.
+ *
+ * @param {string | HTMLExpressView} view - The view function or path to html file
+ * @param {object} data - Data to be made available in view
+ * @param {Record<string, any>} [customState]
+ * @returns {Promise<string>} HTML with includes available (appended to state)
+ */
+export function buildViewHtml(view: string | HTMLExpressView, data?: object, customState?: Record<string, any>): Promise<string>;
 /**
  * Template literal that supports string
  * interpolating in passed HTML.
@@ -55,7 +73,7 @@ export type HTMLExpressOptions = {
      */
     buildRequestState?: HTMLExpressBuildStateHandler | undefined;
 };
-export type HTMLExpressViewState = Record<string, string> & {
+export type HTMLExpressViewState = Record<string, any> & {
     includes: Record<string, string>;
 };
 export type HTMLExpressView<D extends Record<string, any> = Record<string, any>> = (data: D, state: HTMLExpressViewState) => string;

package/src/index.js

@@ -20,7 +20,7 @@ import { stat } from 'fs/promises';
  */
 
 /**
- * @typedef {Record<string, string> & {
+ * @typedef {Record<string, any> & {
  * includes: Record<string, string>
  * }} HTMLExpressViewState
  */
@@ -54,17 +54,17 @@ let buildRequestState;
 let notFoundView = `404/index`;
 
 /**
- * Renders an HTML template in a file.
+ * Generates the HTML for a view function inside of the passed file.
  *
  * @private
- * @param {string} path - The path to html file
- * @param {object} [data]
- * @param {object} [state] - Page-level attributes
+ * @param {HTMLExpressView} view - The view function
+ * @param {Record<string, any>} [data]
+ * @param {HTMLExpressViewState} [state] - Page-level attributes
  * @returns {Promise<string>} HTML
  */
-async function renderFileTemplate(path, data, state) {
-  const { view } = await import(path);
-  const rendered = view(data, state);
+async function renderViewHtml(view, data, state) {
+  state = state || { includes: {} };
+  const rendered = view(data || {}, state);
   let html = '';
   for (const chunk of rendered) {
     html += chunk;
@@ -72,18 +72,45 @@ async function renderFileTemplate(path, data, state) {
   return html;
 }
 
+/**
+ * Generates the HTML for a view function inside of the passed file.
+ *
+ * @private
+ * @param {string} path - The path to html file
+ * @param {object} [data]
+ * @param {HTMLExpressViewState} [state] - Page-level attributes
+ * @returns {Promise<string>} HTML
+ */
+async function buildView(path, data, state) {
+  const { view } = await import(path);
+  return renderViewHtml(view, data, state);
+}
+
+/**
+ * Generates HTML for the provided view and adds all includes to state object.
+ *
+ * @param {string | HTMLExpressView} view - The view function or path to view file
+ * @param {import('express').Request} req - The request to build the state from
+ * @param {Record<string, any>} [data] - Data provided to the view
+ * @returns {Promise<string>} HTML with includes available (appended to state)
+ */
+export async function buildStateViewHtml(view, req, data = {}) {
+  const requestState = buildRequestState ? await buildRequestState(req) : {};
+  return buildViewHtml(view, data, requestState);
+}
+
 /**
  * Renders a JS HTML file and adds all includes to state object.
  *
- * @param {string} filePath - The path to html file
+ * @param {string | HTMLExpressView} view - The path to html file
  * @param {import('express').Request} req
  * @param {import('express').Response} res
  * @param {Record<string, any>} [data]
  * @returns {Promise<string>} HTML with includes available (appended to state)
  */
-export async function renderView(filePath, req, res, data = {}) {
-  const requestState = buildRequestState ? await buildRequestState(req) : {};
-  const html = await buildViewHtml(filePath, data, requestState);
+export async function renderView(view, req, res, data = {}) {
+  const html = await buildStateViewHtml(view, req, data);
+  res.set('Content-Type', 'text/html');
   res.send(html);
   return html;
 }
@@ -91,23 +118,27 @@ export async function renderView(filePath, req, res, data = {}) {
 /**
  * Renders a JS HTML file and adds all includes to state object.
  *
- * @param {string} filePath - The path to html file
+ * @param {string | HTMLExpressView} view - The view function or path to html file
  * @param {object} data - Data to be made available in view
  * @param {Record<string, any>} [customState]
  * @returns {Promise<string>} HTML with includes available (appended to state)
  */
-async function buildViewHtml(filePath, data = {}, customState = {}) {
+export async function buildViewHtml(view, data = {}, customState = {}) {
   /**
-   * @type {Record<string, any>}
+   * @type {HTMLExpressViewState}
    */
   const state = { ...customState, includes: {} };
 
   const includeFilePaths = await glob(`${includesDir}/*.js`);
   for await (const includePath of includeFilePaths) {
     const key = basename(includePath, '.js');
-    state.includes[key] = await renderFileTemplate(includePath, data, state);
+    state.includes[key] = await buildView(includePath, data, state);
+  }
+  if (typeof view === 'string') {
+    const filePath = view;
+    return await buildView(`${viewsDir}/${filePath}.js`, data, state);
   }
-  return await renderFileTemplate(`${viewsDir}/${filePath}.js`, data, state);
+  return await renderViewHtml(view, data, state);
 }
 
 /**