+ load(import.meta, { ...options } = {}, { ...data } = {})

lib/backend.js

@@ -1,4 +1,5 @@
 import jsdom from 'jsdom'
+import { readFile } from 'fs/promises'
 import { renderer, serializer } from './dom.js'
 
 const symbol = Symbol('source')
@@ -12,6 +13,14 @@ export const template = (source, { ...data } = {}) => ({
   ...data
 })
 
+export const load = async ({ url }, { ...options } = {}, { ...data } = {}) => {
+  const parts = url.split('.')
+
+  parts.splice(-1, 1, 'html')
+
+  return template((await readFile(parts.join('.'), options)).toString(), data)
+}
+
 const context = {
   document,
   parser: new DOMParser(),

lib/frontend.js

@@ -1,6 +1,8 @@
+import { readFile } from 'fs/promises'
 import { renderer, serializer } from './dom.js'
 
 const symbol = Symbol('source')
+const read = response => response.text()
 
 export const source = symbol
 
@@ -9,6 +11,14 @@ export const template = (source, { ...data } = {}) => ({
   ...data
 })
 
+export const load = async ({ url }, { ...options } = {}, { ...data } = {}) => {
+  const parts = url.split('.')
+
+  parts.splice(-1, 1, 'html')
+
+  return template(await fetch(parts.join('.'), options).then(read), data)
+}
+
 const { document, trustedTypes, DOMParser, XMLSerializer } = window
 
 const context = {

lib/worker.js

@@ -5,6 +5,7 @@ const {
 } = Object
 
 const symbol = Symbol('source')
+const read = response => response.text()
 
 export const source = symbol
 
@@ -13,6 +14,14 @@ export const template = (source, { ...data } = {}) => ({
   ...data
 })
 
+export const load = async ({ url }, { ...options } = {}, { ...data } = {}) => {
+  const parts = url.split('.')
+
+  parts.splice(-1, 1, 'html')
+
+  return template(await fetch(parts.join('.'), options).then(read), data)
+}
+
 const symbols = {
   source
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lcf.vs/dom-engine",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "A composable DOM based template engine",
   "type": "module",
   "exports": {

readme.md

@@ -147,18 +147,27 @@ const html = await serialize(p)
 ```js
 import { template, source } from '@lcf.vs/dom-engine/lib/frontend.js'
 
-const template = template(html, { ...fields } = {})
+const tpl = template(html, { ...fields } = {})
 
 // or 
 
-const template = {
+const tpl = {
   [source]: html,
   ...fields
 }
 ```
 
 ### Back-End
 
+```js
+import { load } from '@lcf.vs/dom-engine/lib/backend.js'
+
+// loads a file with the same name than the current module,
+// but with a .html extension instead of the current one
+const tpl = await load(import.meta, { ...options } = {}, { ...data } = {})
+```
+Where the options are the **async** `readFile()` ones
+
 ```js
 import { serialize } from '@lcf.vs/dom-engine/lib/backend.js'
 
@@ -173,6 +182,15 @@ const htmlNode = render(template)
 
 ### Front-End
 
+```js
+import { load } from '@lcf.vs/dom-engine/lib/frontend.js'
+
+// loads a file with the same name than the current module,
+// but with a .html extension instead of the current one
+const tpl = await load(import.meta, { ...options } = {}, { ...data } = {})
+```
+Where the options are the `fetch()` ones
+
 ```js
 import { serialize } from '@lcf.vs/dom-engine/lib/frontend.js'
 
@@ -199,6 +217,15 @@ import '@lcf.vs/dom-engine/lib/worker-client.js'
 
 #### Into the `ServiceWorker` script
 
+```js
+import { load } from '@lcf.vs/dom-engine/lib/frontend.js'
+
+// loads a file with the same name than the current module,
+// but with a .html extension instead of the current one
+const tpl = await load(import.meta, { ...options } = {}, { ...data } = {})
+```
+Where the options are the `fetch()` ones
+
 ```js
 import { serialize, source } from '@lcf.vs/dom-engine/lib/worker.js'