diff --git a/lib/backend.js b/lib/backend.js index 87e25dc..3d4892e 100644 --- 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('') 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 index d1b7f4e..3e76b70 100644 --- 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 index 1ab35ec..51ae81d 100644 --- 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 index 7a16f3e..746f38f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@lcf.vs/dom-engine", - "version": "4.0.2", + "version": "4.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@lcf.vs/dom-engine", - "version": "4.0.2", + "version": "4.1.0", "license": "MIT", "dependencies": { "jsdom": "^16.6.0" diff --git a/package.json b/package.json index 3e96e05..5c30772 100644 --- 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 index a845841..2c71be4 100644 --- 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