kempo-server 3.0.11 → 3.0.12

package/CHANGELOG.md

@@ -2,12 +2,16 @@
 
 All notable changes to `kempo-server` are documented in this file.
 
+## [3.0.12] - 2026-04-17
+
+### Added
+- **`renderExternalPage(pageFilePath, rootDir, resolveDir, globals, state, maxDepth)`** exported from `kempo-server/templating`. Identical pipeline to `renderPage` but decouples the page file's physical location from where templates and fragments are resolved. `resolveDir` (a path within `rootDir`) drives template/fragment walk-up and `pathToRoot` calculation, allowing page files that live outside `rootDir` (e.g. in extension packages) to use the host project's templates. Internally `renderPage` now delegates to a shared `renderPageCore` with no change to its public signature or behavior.
+
 ## [3.0.11] - 2026-04-16
 
 ### Added
 
 - **`renderPageToString(pagePath, vars, rootDir)`** exported from `kempo-server/templating`. Runs the full templating pipeline (template resolution, fragment injection, global content, `<if>`, `<foreach>`, `{{vars}}`) against a `.page.html` file and returns the final HTML string. Intended for programmatic use such as rendering emails.
-
 ---
 
 ## [3.0.0] - 2026-04-09

package/README.md

@@ -382,6 +382,45 @@ const html = await renderPageToString(
 
 **Note:** `vars` are merged as `state` in the pipeline, meaning `<page>` tag attributes take highest priority, followed by `vars`, then `globals`. Built-in vars (`{{year}}`, `{{date}}`, `{{datetime}}`, `{{timestamp}}`) are always available.
 
+## Rendering Pages from External Packages
+
+Use `renderExternalPage` when a page file lives outside `rootDir` — for example, in a plugin or extension package — but should be rendered using the host project's templates, fragments, and globals.
+
+```javascript
+import { renderExternalPage } from 'kempo-server/templating';
+
+const html = await renderExternalPage(pageFilePath, rootDir, resolveDir, globals, state, maxDepth);
+```
+
+**Parameters:**
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `pageFilePath` | `string` | Absolute path to the `.page.html` file. May live outside `rootDir`. Used only to read content. |
+| `rootDir` | `string` | Ceiling for template/fragment walk-up. `*.global.html` files are scanned from here. |
+| `resolveDir` | `string` | Directory **within** `rootDir` where template and fragment walk-up starts. `pathToRoot` is calculated from here. |
+| `globals` | `object` | Global variables available to all pages |
+| `state` | `object` | Per-render variables |
+| `maxDepth` | `number` | Max fragment nesting depth (default `10`) |
+
+The behavior is identical to `renderPage` called on a hypothetical page file physically located at `resolveDir/<filename>.page.html`. The only difference is that the page content is read from `pageFilePath` regardless of where it lives on disk.
+
+**Example — extension package rendering into host templates:**
+
+```javascript
+import { renderExternalPage } from 'kempo-server/templating';
+import path from 'path';
+
+// Page lives in the extension package, but uses the host app's templates
+const html = await renderExternalPage(
+  path.resolve('./node_modules/my-extension/admin/dashboard.page.html'),
+  path.resolve('./public'),          // rootDir — host project root
+  path.resolve('./public/admin'),    // resolveDir — treat it as if it lives here
+  globals,
+  state
+);
+```
+
 ## Programmatic File Rescan
 
 When files are added or removed at runtime (e.g., by a CMS generating static pages), you can trigger a file rescan without restarting the server:

package/dist/templating/index.js

@@ -1 +1 @@
-import{readFile,writeFile,mkdir,readdir}from"fs/promises";import path from"path";import{extractAttrs,extractContentBlocks,mergeContentBlocks,replaceLocations,resolveVars,resolveIfs,resolveForeach,resolveFragmentTags}from"./parse.js";import{readFileSync,statSync}from"fs";const findFileUpSync=(filename,startDir,rootDir)=>{let dir=startDir;const root=path.resolve(rootDir);for(;;){const candidate=path.join(dir,filename);try{return statSync(candidate),candidate}catch(e){}if(path.resolve(dir)===root)return null;const parent=path.dirname(dir);if(parent===dir)return null;dir=parent}},loadVersion=rootDir=>{try{return JSON.parse(readFileSync(path.join(rootDir,"package.json"),"utf8")).version||""}catch(e){return""}},walkGlobals=async dir=>{const entries=await readdir(dir,{withFileTypes:!0}),results=[];for(const entry of entries){const full=path.join(dir,entry.name);entry.isDirectory()?results.push(...await walkGlobals(full)):entry.name.endsWith(".global.html")&&results.push(full)}return results},loadGlobalContent=async rootDir=>{const files=await walkGlobals(rootDir),maps=await Promise.all(files.map(async f=>extractContentBlocks(await readFile(f,"utf8"))));return mergeContentBlocks(...maps)},renderPage=async(pageFilePath,rootDir,globals={},state={},maxDepth=10,preloadedGlobalContent=null)=>{const pageContent=await readFile(pageFilePath,"utf8"),pageTagMatch=pageContent.match(/^[\s\S]*?<page((?:[^>"']|"[^"]*"|'[^']*')*)>/);if(!pageTagMatch)throw new Error(`Invalid page file: missing <page> root element in ${pageFilePath}`);const pageAttrs=extractAttrs(pageTagMatch[1]),templateName=pageAttrs.template||"default";delete pageAttrs.template;const pageDir=path.dirname(pageFilePath);let templateFile=findFileUpSync(`${templateName}.template.html`,pageDir,rootDir);if(templateFile||"default"===templateName||(templateFile=findFileUpSync("default.template.html",pageDir,rootDir)),!templateFile)throw new Error(`Template not found: ${templateName}.template.html or default.template.html (searched from ${pageDir} to ${rootDir})`);const globalContent=preloadedGlobalContent??await loadGlobalContent(rootDir),rawPageBlocks=extractContentBlocks(pageContent),pageBlocks={};for(const[name,entries]of Object.entries(rawPageBlocks))pageBlocks[name]=entries.map(e=>({...e,html:replaceLocations(e.html,globalContent)}));const contentBlocks=mergeContentBlocks(pageBlocks,globalContent);let templateHtml=readFileSync(templateFile,"utf8");templateHtml=resolveFragmentTags(templateHtml,name=>{const filePath=findFileUpSync(name+".fragment.html",pageDir,rootDir);return filePath?readFileSync(filePath,"utf8"):null},0,maxDepth),templateHtml=replaceLocations(templateHtml,contentBlocks);const rel=path.relative(rootDir,path.dirname(pageFilePath)),depth=rel?rel.split(path.sep).length:0,now=new Date,vars={pathToRoot:depth>0?"../".repeat(depth):"./",year:String(now.getFullYear()),date:now.toISOString().slice(0,10),datetime:now.toISOString(),timestamp:String(Date.now()),version:loadVersion(rootDir),env:process.env.NODE_ENV||"",...globals,...state,...pageAttrs};for(const[key,val]of Object.entries(vars))"function"==typeof val&&(vars[key]=val());return templateHtml=resolveIfs(templateHtml,vars),templateHtml=resolveForeach(templateHtml,vars),templateHtml=resolveVars(templateHtml,vars),templateHtml},walkPages=async dir=>{const entries=await readdir(dir,{withFileTypes:!0}),results=[];for(const entry of entries){const full=path.join(dir,entry.name);entry.isDirectory()?results.push(...await walkPages(full)):entry.name.endsWith(".page.html")&&results.push(full)}return results},renderDir=async(inputDir,outputDir,globals={},state={},maxDepth=10)=>{const[pages,globalContent]=await Promise.all([walkPages(inputDir),loadGlobalContent(inputDir)]);let count=0;for(const page of pages){const outRel=path.relative(inputDir,page).replace(/\.page\.html$/,".html"),outPath=path.join(outputDir,outRel);await mkdir(path.dirname(outPath),{recursive:!0});const html=await renderPage(page,inputDir,globals,state,maxDepth,globalContent);await writeFile(outPath,html,"utf8"),count++}return count},renderPageToString=(pagePath,vars={},rootDir=path.dirname(pagePath))=>renderPage(pagePath,rootDir,{},vars);export{renderPage,renderDir,renderPageToString};
+import{readFile,writeFile,mkdir,readdir}from"fs/promises";import path from"path";import{extractAttrs,extractContentBlocks,mergeContentBlocks,replaceLocations,resolveVars,resolveIfs,resolveForeach,resolveFragmentTags}from"./parse.js";import{readFileSync,statSync}from"fs";const findFileUpSync=(filename,startDir,rootDir)=>{let dir=startDir;const root=path.resolve(rootDir);for(;;){const candidate=path.join(dir,filename);try{return statSync(candidate),candidate}catch(e){}if(path.resolve(dir)===root)return null;const parent=path.dirname(dir);if(parent===dir)return null;dir=parent}},loadVersion=rootDir=>{try{return JSON.parse(readFileSync(path.join(rootDir,"package.json"),"utf8")).version||""}catch(e){return""}},walkGlobals=async dir=>{const entries=await readdir(dir,{withFileTypes:!0}),results=[];for(const entry of entries){const full=path.join(dir,entry.name);entry.isDirectory()?results.push(...await walkGlobals(full)):entry.name.endsWith(".global.html")&&results.push(full)}return results},loadGlobalContent=async rootDir=>{const files=await walkGlobals(rootDir),maps=await Promise.all(files.map(async f=>extractContentBlocks(await readFile(f,"utf8"))));return mergeContentBlocks(...maps)},renderPageCore=async(pageFilePath,rootDir,resolveDir,globals={},state={},maxDepth=10,preloadedGlobalContent=null)=>{const pageContent=await readFile(pageFilePath,"utf8"),pageTagMatch=pageContent.match(/^[\s\S]*?<page((?:[^>"']|"[^"]*"|'[^']*')*)>/);if(!pageTagMatch)throw new Error(`Invalid page file: missing <page> root element in ${pageFilePath}`);const pageAttrs=extractAttrs(pageTagMatch[1]),templateName=pageAttrs.template||"default";delete pageAttrs.template;let templateFile=findFileUpSync(`${templateName}.template.html`,resolveDir,rootDir);if(templateFile||"default"===templateName||(templateFile=findFileUpSync("default.template.html",resolveDir,rootDir)),!templateFile)throw new Error(`Template not found: ${templateName}.template.html or default.template.html (searched from ${resolveDir} to ${rootDir})`);const globalContent=preloadedGlobalContent??await loadGlobalContent(rootDir),rawPageBlocks=extractContentBlocks(pageContent),pageBlocks={};for(const[name,entries]of Object.entries(rawPageBlocks))pageBlocks[name]=entries.map(e=>({...e,html:replaceLocations(e.html,globalContent)}));const contentBlocks=mergeContentBlocks(pageBlocks,globalContent);let templateHtml=readFileSync(templateFile,"utf8");templateHtml=resolveFragmentTags(templateHtml,name=>{const filePath=findFileUpSync(name+".fragment.html",resolveDir,rootDir);return filePath?readFileSync(filePath,"utf8"):null},0,maxDepth),templateHtml=replaceLocations(templateHtml,contentBlocks);const rel=path.relative(rootDir,resolveDir),depth=rel?rel.split(path.sep).length:0,now=new Date,vars={pathToRoot:depth>0?"../".repeat(depth):"./",year:String(now.getFullYear()),date:now.toISOString().slice(0,10),datetime:now.toISOString(),timestamp:String(Date.now()),version:loadVersion(rootDir),env:process.env.NODE_ENV||"",...globals,...state,...pageAttrs};for(const[key,val]of Object.entries(vars))"function"==typeof val&&(vars[key]=val());return templateHtml=resolveIfs(templateHtml,vars),templateHtml=resolveForeach(templateHtml,vars),templateHtml=resolveVars(templateHtml,vars),templateHtml},renderPage=(pageFilePath,rootDir,globals={},state={},maxDepth=10,preloadedGlobalContent=null)=>renderPageCore(pageFilePath,rootDir,path.dirname(pageFilePath),globals,state,maxDepth,preloadedGlobalContent),renderExternalPage=(pageFilePath,rootDir,resolveDir,globals={},state={},maxDepth=10)=>renderPageCore(pageFilePath,rootDir,resolveDir,globals,state,maxDepth,null),walkPages=async dir=>{const entries=await readdir(dir,{withFileTypes:!0}),results=[];for(const entry of entries){const full=path.join(dir,entry.name);entry.isDirectory()?results.push(...await walkPages(full)):entry.name.endsWith(".page.html")&&results.push(full)}return results},renderDir=async(inputDir,outputDir,globals={},state={},maxDepth=10)=>{const[pages,globalContent]=await Promise.all([walkPages(inputDir),loadGlobalContent(inputDir)]);let count=0;for(const page of pages){const outRel=path.relative(inputDir,page).replace(/\.page\.html$/,".html"),outPath=path.join(outputDir,outRel);await mkdir(path.dirname(outPath),{recursive:!0});const html=await renderPage(page,inputDir,globals,state,maxDepth,globalContent);await writeFile(outPath,html,"utf8"),count++}return count},renderPageToString=(pagePath,vars={},rootDir=path.dirname(pagePath))=>renderPage(pagePath,rootDir,{},vars);export{renderPage,renderDir,renderPageToString,renderExternalPage};

package/docs/templating.html

@@ -318,7 +318,44 @@
 		<p>The CLI automatically loads <code>.config.js</code> or <code>.config.json</code> from the input directory for globals, state, and maxFragmentDepth settings.</p>
 
 		<h3>Programmatic API</h3>
-		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderDir, renderPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><br /><span class="hljs-comment">// Render all pages in a directory</span><br /><span class="hljs-keyword">const</span> count = <span class="hljs-keyword">await</span> renderDir(<span class="hljs-string">'./src'</span>, <span class="hljs-string">'./dist'</span>, globals, state, maxDepth);<br /><br /><span class="hljs-comment">// Render a single page</span><br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderPage(<span class="hljs-string">'./src/about.page.html'</span>, <span class="hljs-string">'./src'</span>, globals, state, maxDepth);</code></pre>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderDir, renderPage, renderPageToString, renderExternalPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><br /><span class="hljs-comment">// Render all pages in a directory</span><br /><span class="hljs-keyword">const</span> count = <span class="hljs-keyword">await</span> renderDir(<span class="hljs-string">'./src'</span>, <span class="hljs-string">'./dist'</span>, globals, state, maxDepth);<br /><br /><span class="hljs-comment">// Render a single page</span><br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderPage(<span class="hljs-string">'./src/about.page.html'</span>, <span class="hljs-string">'./src'</span>, globals, state, maxDepth);<br /><br /><span class="hljs-comment">// Render a page to a string (e.g. for sending emails)</span><br /><span class="hljs-keyword">const</span> emailHtml = <span class="hljs-keyword">await</span> renderPageToString(pagePath, vars, rootDir);<br /><br /><span class="hljs-comment">// Render a page file that lives outside rootDir</span><br /><span class="hljs-keyword">const</span> extHtml = <span class="hljs-keyword">await</span> renderExternalPage(pageFilePath, rootDir, resolveDir, globals, state, maxDepth);</code></pre>
+
+		<h3 id="render-page-to-string">renderPageToString</h3>
+		<p>Runs the full templating pipeline against a <code>.page.html</code> file and returns the final HTML string — no HTTP request needed. Template resolution, fragment injection, global content, <code>&lt;if&gt;</code>, <code>&lt;foreach&gt;</code>, and <code>&#123;&#123;vars&#125;&#125;</code> all work identically to a normal web render. Ideal for sending emails, generating PDFs, or any other programmatic rendering.</p>
+		<div class="table-wrapper mb">
+		<table>
+			<thead>
+				<tr><th>Parameter</th><th>Type</th><th>Default</th><th>Description</th></tr>
+			</thead>
+			<tbody>
+				<tr><td><code>pagePath</code></td><td><code>string</code></td><td><em>required</em></td><td>Absolute path to a <code>.page.html</code> file</td></tr>
+				<tr><td><code>vars</code></td><td><code>object</code></td><td><code>{}</code></td><td>Data available as <code>&#123;&#123;varName&#125;&#125;</code> in templates, fragments, and conditions</td></tr>
+				<tr><td><code>rootDir</code></td><td><code>string</code></td><td>Directory of <code>pagePath</code></td><td>Root for template, fragment, and global file search</td></tr>
+			</tbody>
+		</table>
+		</div>
+		<p>A common use case is sending templated emails. Create a dedicated email directory with a shared template, per-email pages, reusable fragments, and optional global content:</p>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderPageToString } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><span class="hljs-keyword">import</span> path <span class="hljs-keyword">from</span> <span class="hljs-string">'path'</span>;<br /><br /><span class="hljs-keyword">const</span> emailsDir = path.resolve(<span class="hljs-string">'./emails'</span>);<br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderPageToString(<br />  path.join(emailsDir, <span class="hljs-string">'welcome.page.html'</span>),<br />  { userName: <span class="hljs-string">'Alice'</span>, orderId: <span class="hljs-string">'1234'</span> }<br />);</code></pre>
+		<p>Built-in vars (<code>2026</code>, <code>2026-04-17</code>, <code>2026-04-17T16:44:17.587Z</code>, <code>1776444257587</code>) are always available. Note that <code>&lt;page&gt;</code> tag attributes take highest priority and override <code>vars</code> with the same key.</p>
+
+		<h3 id="render-external-page">renderExternalPage</h3>
+		<p>Identical pipeline to <code>renderPage</code>, but decouples the page file's physical location from where templates and fragments are resolved. Use this when a page file lives outside <code>rootDir</code> — for example, in a plugin or extension package — but should be rendered using the host project's templates, fragments, and globals.</p>
+		<div class="table-wrapper mb">
+		<table>
+			<thead>
+				<tr><th>Parameter</th><th>Type</th><th>Default</th><th>Description</th></tr>
+			</thead>
+			<tbody>
+				<tr><td><code>pageFilePath</code></td><td><code>string</code></td><td><em>required</em></td><td>Absolute path to the <code>.page.html</code> file. May live outside <code>rootDir</code>. Used only to read content.</td></tr>
+				<tr><td><code>rootDir</code></td><td><code>string</code></td><td><em>required</em></td><td>Ceiling for template/fragment walk-up. <code>*.global.html</code> files are scanned from here.</td></tr>
+				<tr><td><code>resolveDir</code></td><td><code>string</code></td><td><em>required</em></td><td>Directory within <code>rootDir</code> where template and fragment walk-up starts. <code>pathToRoot</code> is calculated from here.</td></tr>
+				<tr><td><code>globals</code></td><td><code>object</code></td><td><code>{}</code></td><td>Global variables available to all pages</td></tr>
+				<tr><td><code>state</code></td><td><code>object</code></td><td><code>{}</code></td><td>Per-render variables</td></tr>
+				<tr><td><code>maxDepth</code></td><td><code>number</code></td><td><code>10</code></td><td>Maximum fragment nesting depth</td></tr>
+			</tbody>
+		</table>
+		</div>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderExternalPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><span class="hljs-keyword">import</span> path <span class="hljs-keyword">from</span> <span class="hljs-string">'path'</span>;<br /><br /><span class="hljs-comment">// Page lives in an extension package, rendered with the host app's templates</span><br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderExternalPage(<br />  path.resolve(<span class="hljs-string">'./node_modules/my-ext/admin/dashboard.page.html'</span>),<br />  path.resolve(<span class="hljs-string">'./public'</span>),         <span class="hljs-comment">// rootDir</span><br />  path.resolve(<span class="hljs-string">'./public/admin'</span>),    <span class="hljs-comment">// resolveDir</span><br />  globals,<br />  state<br />);</code></pre>
 
 		<h2 id="ssr">Server-Side Rendering</h2>
 		<p>Pages can also be rendered on each request instead of pre-built. This is useful during development so you can see changes without rebuilding.</p>

package/docs-src/templating.page.html

@@ -218,7 +218,44 @@
 		<p>The CLI automatically loads <code>.config.js</code> or <code>.config.json</code> from the input directory for globals, state, and maxFragmentDepth settings.</p>
 
 		<h3>Programmatic API</h3>
-		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderDir, renderPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><br /><span class="hljs-comment">// Render all pages in a directory</span><br /><span class="hljs-keyword">const</span> count = <span class="hljs-keyword">await</span> renderDir(<span class="hljs-string">'./src'</span>, <span class="hljs-string">'./dist'</span>, globals, state, maxDepth);<br /><br /><span class="hljs-comment">// Render a single page</span><br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderPage(<span class="hljs-string">'./src/about.page.html'</span>, <span class="hljs-string">'./src'</span>, globals, state, maxDepth);</code></pre>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderDir, renderPage, renderPageToString, renderExternalPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><br /><span class="hljs-comment">// Render all pages in a directory</span><br /><span class="hljs-keyword">const</span> count = <span class="hljs-keyword">await</span> renderDir(<span class="hljs-string">'./src'</span>, <span class="hljs-string">'./dist'</span>, globals, state, maxDepth);<br /><br /><span class="hljs-comment">// Render a single page</span><br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderPage(<span class="hljs-string">'./src/about.page.html'</span>, <span class="hljs-string">'./src'</span>, globals, state, maxDepth);<br /><br /><span class="hljs-comment">// Render a page to a string (e.g. for sending emails)</span><br /><span class="hljs-keyword">const</span> emailHtml = <span class="hljs-keyword">await</span> renderPageToString(pagePath, vars, rootDir);<br /><br /><span class="hljs-comment">// Render a page file that lives outside rootDir</span><br /><span class="hljs-keyword">const</span> extHtml = <span class="hljs-keyword">await</span> renderExternalPage(pageFilePath, rootDir, resolveDir, globals, state, maxDepth);</code></pre>
+
+		<h3 id="render-page-to-string">renderPageToString</h3>
+		<p>Runs the full templating pipeline against a <code>.page.html</code> file and returns the final HTML string — no HTTP request needed. Template resolution, fragment injection, global content, <code>&lt;if&gt;</code>, <code>&lt;foreach&gt;</code>, and <code>&#123;&#123;vars&#125;&#125;</code> all work identically to a normal web render. Ideal for sending emails, generating PDFs, or any other programmatic rendering.</p>
+		<div class="table-wrapper mb">
+		<table>
+			<thead>
+				<tr><th>Parameter</th><th>Type</th><th>Default</th><th>Description</th></tr>
+			</thead>
+			<tbody>
+				<tr><td><code>pagePath</code></td><td><code>string</code></td><td><em>required</em></td><td>Absolute path to a <code>.page.html</code> file</td></tr>
+				<tr><td><code>vars</code></td><td><code>object</code></td><td><code>{}</code></td><td>Data available as <code>&#123;&#123;varName&#125;&#125;</code> in templates, fragments, and conditions</td></tr>
+				<tr><td><code>rootDir</code></td><td><code>string</code></td><td>Directory of <code>pagePath</code></td><td>Root for template, fragment, and global file search</td></tr>
+			</tbody>
+		</table>
+		</div>
+		<p>A common use case is sending templated emails. Create a dedicated email directory with a shared template, per-email pages, reusable fragments, and optional global content:</p>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderPageToString } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><span class="hljs-keyword">import</span> path <span class="hljs-keyword">from</span> <span class="hljs-string">'path'</span>;<br /><br /><span class="hljs-keyword">const</span> emailsDir = path.resolve(<span class="hljs-string">'./emails'</span>);<br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderPageToString(<br />  path.join(emailsDir, <span class="hljs-string">'welcome.page.html'</span>),<br />  { userName: <span class="hljs-string">'Alice'</span>, orderId: <span class="hljs-string">'1234'</span> }<br />);</code></pre>
+		<p>Built-in vars (<code>{{year}}</code>, <code>{{date}}</code>, <code>{{datetime}}</code>, <code>{{timestamp}}</code>) are always available. Note that <code>&lt;page&gt;</code> tag attributes take highest priority and override <code>vars</code> with the same key.</p>
+
+		<h3 id="render-external-page">renderExternalPage</h3>
+		<p>Identical pipeline to <code>renderPage</code>, but decouples the page file's physical location from where templates and fragments are resolved. Use this when a page file lives outside <code>rootDir</code> — for example, in a plugin or extension package — but should be rendered using the host project's templates, fragments, and globals.</p>
+		<div class="table-wrapper mb">
+		<table>
+			<thead>
+				<tr><th>Parameter</th><th>Type</th><th>Default</th><th>Description</th></tr>
+			</thead>
+			<tbody>
+				<tr><td><code>pageFilePath</code></td><td><code>string</code></td><td><em>required</em></td><td>Absolute path to the <code>.page.html</code> file. May live outside <code>rootDir</code>. Used only to read content.</td></tr>
+				<tr><td><code>rootDir</code></td><td><code>string</code></td><td><em>required</em></td><td>Ceiling for template/fragment walk-up. <code>*.global.html</code> files are scanned from here.</td></tr>
+				<tr><td><code>resolveDir</code></td><td><code>string</code></td><td><em>required</em></td><td>Directory within <code>rootDir</code> where template and fragment walk-up starts. <code>pathToRoot</code> is calculated from here.</td></tr>
+				<tr><td><code>globals</code></td><td><code>object</code></td><td><code>{}</code></td><td>Global variables available to all pages</td></tr>
+				<tr><td><code>state</code></td><td><code>object</code></td><td><code>{}</code></td><td>Per-render variables</td></tr>
+				<tr><td><code>maxDepth</code></td><td><code>number</code></td><td><code>10</code></td><td>Maximum fragment nesting depth</td></tr>
+			</tbody>
+		</table>
+		</div>
+		<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> { renderExternalPage } <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo-server/templating'</span>;<br /><span class="hljs-keyword">import</span> path <span class="hljs-keyword">from</span> <span class="hljs-string">'path'</span>;<br /><br /><span class="hljs-comment">// Page lives in an extension package, rendered with the host app's templates</span><br /><span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> renderExternalPage(<br />  path.resolve(<span class="hljs-string">'./node_modules/my-ext/admin/dashboard.page.html'</span>),<br />  path.resolve(<span class="hljs-string">'./public'</span>),         <span class="hljs-comment">// rootDir</span><br />  path.resolve(<span class="hljs-string">'./public/admin'</span>),    <span class="hljs-comment">// resolveDir</span><br />  globals,<br />  state<br />);</code></pre>
 
 		<h2 id="ssr">Server-Side Rendering</h2>
 		<p>Pages can also be rendered on each request instead of pre-built. This is useful during development so you can see changes without rebuilding.</p>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kempo-server",
   "type": "module",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "description": "A lightweight, zero-dependency, file based routing server.",
   "exports": {
     "./rescan": "./dist/rescan.js",

package/src/templating/index.js

@@ -63,9 +63,9 @@ const loadGlobalContent = async rootDir => {
 };
 
 /*
-  Render a Single Page
+  Render a Single Page (internal — accepts explicit resolveDir)
 */
-const renderPage = async (pageFilePath, rootDir, globals = {}, state = {}, maxDepth = 10, preloadedGlobalContent = null) => {
+const renderPageCore = async (pageFilePath, rootDir, resolveDir, globals = {}, state = {}, maxDepth = 10, preloadedGlobalContent = null) => {
   const pageContent = await readFile(pageFilePath, 'utf8');
   const pageTagMatch = pageContent.match(/^[\s\S]*?<page((?:[^>"']|"[^"]*"|'[^']*')*)>/);
   if(!pageTagMatch) throw new Error(`Invalid page file: missing <page> root element in ${pageFilePath}`);
@@ -73,15 +73,14 @@ const renderPage = async (pageFilePath, rootDir, globals = {}, state = {}, maxDe
   const templateName = pageAttrs.template || 'default';
   delete pageAttrs.template;
 
-  const pageDir = path.dirname(pageFilePath);
-  let templateFile = findFileUpSync(`${templateName}.template.html`, pageDir, rootDir);
+  let templateFile = findFileUpSync(`${templateName}.template.html`, resolveDir, rootDir);
 
   // If the specified template is not found, fall back to default.template.html
-  if (!templateFile && templateName !== 'default') {
-    templateFile = findFileUpSync('default.template.html', pageDir, rootDir);
+  if(!templateFile && templateName !== 'default'){
+    templateFile = findFileUpSync('default.template.html', resolveDir, rootDir);
   }
 
-  if(!templateFile) throw new Error(`Template not found: ${templateName}.template.html or default.template.html (searched from ${pageDir} to ${rootDir})`);
+  if(!templateFile) throw new Error(`Template not found: ${templateName}.template.html or default.template.html (searched from ${resolveDir} to ${rootDir})`);
 
   const globalContent = preloadedGlobalContent ?? await loadGlobalContent(rootDir);
   const rawPageBlocks = extractContentBlocks(pageContent);
@@ -96,7 +95,7 @@ const renderPage = async (pageFilePath, rootDir, globals = {}, state = {}, maxDe
   let templateHtml = readFileSync(templateFile, 'utf8');
 
   const findFragmentFile = name => {
-    const filePath = findFileUpSync(name + '.fragment.html', pageDir, rootDir);
+    const filePath = findFileUpSync(name + '.fragment.html', resolveDir, rootDir);
     if(!filePath) return null;
     return readFileSync(filePath, 'utf8');
   };
@@ -104,7 +103,7 @@ const renderPage = async (pageFilePath, rootDir, globals = {}, state = {}, maxDe
   templateHtml = resolveFragmentTags(templateHtml, findFragmentFile, 0, maxDepth);
   templateHtml = replaceLocations(templateHtml, contentBlocks);
 
-  const rel = path.relative(rootDir, path.dirname(pageFilePath));
+  const rel = path.relative(rootDir, resolveDir);
   const depth = rel ? rel.split(path.sep).length : 0;
   const now = new Date();
 
@@ -133,6 +132,18 @@ const renderPage = async (pageFilePath, rootDir, globals = {}, state = {}, maxDe
   return templateHtml;
 };
 
+/*
+  Render a Single Page
+*/
+const renderPage = (pageFilePath, rootDir, globals = {}, state = {}, maxDepth = 10, preloadedGlobalContent = null) =>
+  renderPageCore(pageFilePath, rootDir, path.dirname(pageFilePath), globals, state, maxDepth, preloadedGlobalContent);
+
+/*
+  Render a Page File That Lives Outside rootDir
+*/
+const renderExternalPage = (pageFilePath, rootDir, resolveDir, globals = {}, state = {}, maxDepth = 10) =>
+  renderPageCore(pageFilePath, rootDir, resolveDir, globals, state, maxDepth, null);
+
 /*
   Recursively Walk Directory for *.page.html
 */
@@ -171,4 +182,4 @@ const renderDir = async (inputDir, outputDir, globals = {}, state = {}, maxDepth
 const renderPageToString = (pagePath, vars = {}, rootDir = path.dirname(pagePath)) =>
   renderPage(pagePath, rootDir, {}, vars);
 
-export { renderPage, renderDir, renderPageToString };
+export { renderPage, renderDir, renderPageToString, renderExternalPage };

package/tests/renderExternalPage.node-test.js

@@ -0,0 +1,219 @@
+import { renderExternalPage } from '../src/templating/index.js';
+import { writeFile, mkdir } from 'fs/promises';
+import path from 'path';
+import { withTempDir } from './utils/temp-dir.js';
+
+const setupFiles = async (dir, files) => {
+  for(const [rel, content] of Object.entries(files)){
+    const full = path.join(dir, rel);
+    await mkdir(path.dirname(full), {recursive: true});
+    await writeFile(full, content, 'utf8');
+  }
+};
+
+export default {
+  'renderExternalPage renders page outside rootDir using rootDir templates': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        await setupFiles(rootDir, {
+          'default.template.html': '<html><body><location name="main" /></body></html>'
+        });
+        await setupFiles(externalDir, {
+          'admin.page.html': '<page><content location="main"><h1>Admin</h1></content></page>'
+        });
+        const html = await renderExternalPage(
+          path.join(externalDir, 'admin.page.html'),
+          rootDir,
+          rootDir
+        );
+        if(!html.includes('<h1>Admin</h1>')) return fail(`page content missing: ${html}`);
+        if(!html.includes('<html>')) return fail(`template not used: ${html}`);
+        pass();
+      });
+    });
+  },
+
+  'renderExternalPage resolveDir controls template walk-up': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        // template is only in rootDir/admin/ — resolveDir points there
+        await setupFiles(rootDir, {
+          'admin/admin.template.html': '<admin><location name="body" /></admin>'
+        });
+        await setupFiles(externalDir, {
+          'page.page.html': '<page template="admin"><content location="body">content</content></page>'
+        });
+        const html = await renderExternalPage(
+          path.join(externalDir, 'page.page.html'),
+          rootDir,
+          path.join(rootDir, 'admin')
+        );
+        if(!html.includes('<admin>')) return fail(`admin template not resolved: ${html}`);
+        if(!html.includes('content')) return fail(`body missing: ${html}`);
+        pass();
+      });
+    });
+  },
+
+  'renderExternalPage resolveDir controls fragment resolution': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        await setupFiles(rootDir, {
+          'default.template.html': '<fragment name="sig" /><location name="main" />',
+          'sig.fragment.html': '<p>Signature</p>'
+        });
+        await setupFiles(externalDir, {
+          'page.page.html': '<page><content location="main">body</content></page>'
+        });
+        const html = await renderExternalPage(
+          path.join(externalDir, 'page.page.html'),
+          rootDir,
+          rootDir
+        );
+        if(!html.includes('<p>Signature</p>')) return fail(`fragment missing: ${html}`);
+        pass();
+      });
+    });
+  },
+
+  'renderExternalPage pathToRoot reflects resolveDir depth not page file location': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        await setupFiles(rootDir, {
+          'default.template.html': '{{pathToRoot}}<location name="main" />'
+        });
+        await setupFiles(externalDir, {
+          // page lives outside rootDir — its actual location is irrelevant
+          'deep/nested/page.page.html': '<page><content location="main">x</content></page>'
+        });
+        // resolveDir is rootDir/section/ — depth 1
+        await mkdir(path.join(rootDir, 'section'), {recursive: true});
+        const html = await renderExternalPage(
+          path.join(externalDir, 'deep', 'nested', 'page.page.html'),
+          rootDir,
+          path.join(rootDir, 'section')
+        );
+        if(!html.includes('../')) return fail(`pathToRoot should reflect resolveDir depth: ${html}`);
+        // rootDir itself gives depth 0 — resolveDir one level deep gives '../'
+        pass();
+      });
+    });
+  },
+
+  'renderExternalPage uses global content from rootDir': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        await setupFiles(rootDir, {
+          'default.template.html': '<location name="banner" /><location name="main" />',
+          'site.global.html': '<content location="banner"><b>Global Banner</b></content>'
+        });
+        await setupFiles(externalDir, {
+          'page.page.html': '<page><content location="main">body</content></page>'
+        });
+        const html = await renderExternalPage(
+          path.join(externalDir, 'page.page.html'),
+          rootDir,
+          rootDir
+        );
+        if(!html.includes('<b>Global Banner</b>')) return fail(`global missing: ${html}`);
+        pass();
+      });
+    });
+  },
+
+  'renderExternalPage interpolates vars': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        await setupFiles(rootDir, {
+          'default.template.html': '<location name="main" />'
+        });
+        await setupFiles(externalDir, {
+          'page.page.html': '<page><content location="main">Hello {{name}}</content></page>'
+        });
+        const html = await renderExternalPage(
+          path.join(externalDir, 'page.page.html'),
+          rootDir,
+          rootDir,
+          {},
+          {name: 'World'}
+        );
+        if(!html.includes('Hello World')) return fail(`var not interpolated: ${html}`);
+        pass();
+      });
+    });
+  },
+
+  'renderExternalPage processes if conditionals': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        await setupFiles(rootDir, {
+          'default.template.html': '<location name="main" />'
+        });
+        await setupFiles(externalDir, {
+          'page.page.html': '<page><content location="main"><if condition="show">visible</if></content></page>'
+        });
+        const shown = await renderExternalPage(
+          path.join(externalDir, 'page.page.html'),
+          rootDir,
+          rootDir,
+          {},
+          {show: true}
+        );
+        if(!shown.includes('visible')) return fail(`should show: ${shown}`);
+        const hidden = await renderExternalPage(
+          path.join(externalDir, 'page.page.html'),
+          rootDir,
+          rootDir,
+          {},
+          {show: false}
+        );
+        if(hidden.includes('visible')) return fail(`should hide: ${hidden}`);
+        pass();
+      });
+    });
+  },
+
+  'renderExternalPage throws on missing template': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        await setupFiles(externalDir, {
+          'page.page.html': '<page template="missing"><content location="main">x</content></page>'
+        });
+        try {
+          await renderExternalPage(
+            path.join(externalDir, 'page.page.html'),
+            rootDir,
+            rootDir
+          );
+          fail('should have thrown');
+        } catch(e){
+          if(!e.message.includes('Template not found')) return fail(`wrong error: ${e.message}`);
+          pass();
+        }
+      });
+    });
+  },
+
+  'renderExternalPage identical output to renderPage for page inside rootDir': async ({pass, fail}) => {
+    await withTempDir(async rootDir => {
+      await withTempDir(async externalDir => {
+        const template = '<html><body><location name="main" /></body></html>';
+        const pageContent = '<page><content location="main"><p>same</p></content></page>';
+        await setupFiles(rootDir, {'default.template.html': template});
+        await setupFiles(externalDir, {'page.page.html': pageContent});
+        // Copy page content into rootDir so renderPage can serve as reference
+        await setupFiles(rootDir, {'page.page.html': pageContent});
+
+        const { renderPage } = await import('../src/templating/index.js');
+        const reference = await renderPage(path.join(rootDir, 'page.page.html'), rootDir);
+        const result = await renderExternalPage(
+          path.join(externalDir, 'page.page.html'),
+          rootDir,
+          rootDir
+        );
+        if(result !== reference) return fail(`output differs:\nexpected: ${reference}\ngot: ${result}`);
+        pass();
+      });
+    });
+  }
+};