+ .render()

Lcfvs · Jul 7, 2021 · 7f28cae · 7f28cae
1 parent 6eceb88
commit 7f28cae
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 11 deletions.
diff --git a/lib/backend.js b/lib/backend.js
@@ -1,12 +1,16 @@
 import jsdom from 'jsdom'
-import { serializer } from './dom.js'
+import { renderer, serializer } from './dom.js'
 export { template } from './template.js'
 
 const { window } = new jsdom.JSDOM('<!DOCTYPE html>')
 const { document, DOMParser, XMLSerializer } = window
 
-export const serialize = serializer({
+const context = {
   document,
   parser: new DOMParser(),
   serializer: new XMLSerializer()
-})
+}
+
+export const render = renderer(context)
+
+export const serialize = serializer(context)
diff --git a/lib/dom.js b/lib/dom.js
@@ -210,6 +210,21 @@ const resolve = (key, optional, template) => {
     }, template)
 }
 
+export const renderer = ({ document, parser, policy }) => {
+  if (!context) {
+    context = { document, parser, policy }
+  }
+
+  return async template => {
+    const cloned = clone(template, any)
+    const { [symbols.node]: node } = cloned
+
+    fill(cloned)
+
+    return node
+  }
+}
+
 export const serializer = ({ document, parser, policy, serializer }) => {
   if (!context) {
     context = { document, parser, policy }

diff --git a/lib/frontend.js b/lib/frontend.js
@@ -1,13 +1,17 @@
-import { serializer } from './dom.js'
+import { renderer, serializer } from './dom.js'
 export { template } from './template.js'
 
 const { document, trustedTypes, DOMParser, XMLSerializer } = window
 
-export const serialize = serializer({
+const context = {
   document,
   parser: new DOMParser(),
   policy: trustedTypes?.createPolicy('dom-engine', {
     createHTML: source => source
   }),
   serializer: new XMLSerializer()
-})
+}
+
+export const render = renderer(context)
+
+export const serialize = serializer(context)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lcf.vs/dom-engine",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "A composable DOM based template engine",
   "type": "module",
   "scripts": {

diff --git a/readme.md b/readme.md
@@ -160,15 +160,26 @@ const template = {
 ```js
 import { serialize } from '@lcf.vs/dom-engine/lib/backend.js'
 
-const rendered = await serialize(template)
+const htmlString = await serialize(template)
 ```
+Or
+```js
+import { render } from '@lcf.vs/dom-engine/lib/backend.js'
+
+const htmlNode = await render(template)
 
 ### Front-End
 
 ```js
 import { serialize } from '@lcf.vs/dom-engine/lib/frontend.js'
 
-const rendered = await serialize(template)
+const htmlString = await serialize(template)
+```
+Or
+```js
+import { render } from '@lcf.vs/dom-engine/lib/frontend.js'
+
+const htmlNode = await render(template)
 ```
 
 ### ServiceWorker