+ optional markers

lib/dom.js

@@ -1,5 +1,5 @@
 const parts = /(^<!doctype [^>]+>|)([\s\S]*)$/i
-const identifier = /({[a-z][a-z\d]*(?:\.[a-z][a-z\d]*)*})/gi
+const identifier = /({\??[a-z][a-z\d]*(?:\.[a-z][a-z\d]*)*})/gi
 
 export const symbols = {
   doctype: Symbol('dom.doctype'),
@@ -15,6 +15,64 @@ const proto = {
   [symbols.window]: null
 }
 
+function attribute (template, node) {
+  const rules = identify(node.nodeValue)
+  const value = resolve(template, rules)
+
+  if (value === null) {
+    node.ownerElement.removeAttribute(node.nodeName)
+  } else {
+    node.nodeValue = value
+  }
+}
+
+function content (template, node) {
+  const rules = identify(node.textContent)
+  const value = resolve(template, rules)
+
+  if (value === null) {
+    node.remove()
+  } else if (typeof value === 'object') {
+    const { ownerDocument } = node
+    const container = ownerDocument.createDocumentFragment()
+    const nodes = [value].flat()
+
+    nodes.forEach(child => container.appendChild(render(child)))
+    node.parentNode.replaceChild(container, node)
+  } else {
+    node.textContent = value
+  }
+}
+
+function dom ({ DOMParser, NodeFilter }, source) {
+  let [, doctype, contents] = source.match(parts)
+  const parser = new DOMParser()
+  const fragment = parse(parser, doctype, contents)
+  const { ownerDocument } = fragment
+  const walker = ownerDocument.createTreeWalker(fragment, NodeFilter.SHOW_TEXT)
+
+  while (true) {
+    const node = walker.nextNode()
+
+    if (!node || node.parentNode.nodeName === 'TITLE') {
+      break
+    }
+
+    const matches = node.nodeValue.match(identifier) || []
+
+    contents = matches.reduce(rewrite, contents)
+  }
+
+  if (!doctype.length) {
+    contents = wrap(contents)
+  }
+
+  return {
+    doctype,
+    node: tree(parse(parser, doctype, contents))
+  }
+}
+
 function filler (template, node) {
   const { [symbols.window]: window } = template
   const { Node } = window
@@ -32,19 +90,24 @@ function filler (template, node) {
 
 function fill (template) {
   const { [symbols.node]: node, [symbols.window]: window } = template
-  const { document, Node } = window
-  const value = node.nodeType === Node.TEXT_NODE
-    ? resolve(node.textContent, template)
-    : node.nodeValue.replace(identifier, content => resolve(content, template))
-
-  if (typeof value === 'object') {
-    const container = document.createDocumentFragment()
-    const nodes = [value].flat()
 
-    nodes.forEach(child => container.appendChild(render(child)))
-    node.parentNode.replaceChild(container, node)
+  if (node.nodeType === window.Node.TEXT_NODE) {
+    content(template, node)
   } else {
-    node.textContent = value
+    attribute(template, node)
+  }
+}
+
+function identify (identifier) {
+  const rule = identifier.slice(1, -1)
+  const [first] = rule
+  const optional = first === '?'
+  const name = optional ? rule.slice(1) : rule
+
+  return {
+    identifier,
+    optional,
+    name
   }
 }
 
@@ -80,6 +143,19 @@ function map (node) {
   return from(this, node)
 }
 
+function parse (parser, doctype, contents) {
+  const document = parser.parseFromString(`${doctype}${contents}`, 'text/html')
+
+  if (doctype.length) {
+    document.write(contents)
+
+    return document.documentElement
+  } else {
+    return document.createRange()
+      .createContextualFragment(contents)
+  }
+}
+
 function replace (template) {
   const { [symbols.node]: node, [symbols.window]: window } = template
   const { document } = window
@@ -101,17 +177,14 @@ function replace (template) {
   parentNode.replaceChild(container, node)
 }
 
-function resolve (content, template) {
-  return content.slice(1, -1).split('.')
-    .reduce((data, name) => {
-      const { [name]: value = null } = data
+function resolve (template, { identifier, optional, name }) {
+  const { [name]: value = null } = template
 
-      if (value === null) {
-        throw new Error(`Missing ${content} in \`${template[symbols.source]}\``)
-      }
+  if (value === null && !optional) {
+    throw new Error(`Missing ${identifier} in \`${template[symbols.source]}\``)
+  }
 
-      return value
-    }, template)
+  return value
 }
 
 function render (template) {
@@ -122,8 +195,8 @@ function render (template) {
     .reduce(filler, clone)[symbols.node]
 }
 
-function wrap (source) {
-  return `<template>${source}</template>`
+function rewrite (source, match) {
+  return source.replace(match, wrap(match))
 }
 
 function tree (fragment) {
@@ -139,50 +212,8 @@ function tree (fragment) {
   return fragment
 }
 
-function rewrite (source, match) {
-  return source.replace(match, wrap(match))
-}
-
-function parse (parser, doctype, contents) {
-  const document = parser.parseFromString(`${doctype}${contents}`, 'text/html')
-
-  if (doctype.length) {
-    document.write(contents)
-
-    return document.documentElement
-  } else {
-    return document.createRange()
-      .createContextualFragment(contents)
-  }
-}
-
-function dom ({ DOMParser, NodeFilter }, source) {
-  let [, doctype, contents] = source.match(parts)
-  const parser = new DOMParser()
-  const fragment = parse(parser, doctype, contents)
-  const { ownerDocument } = fragment
-  const walker = ownerDocument.createTreeWalker(fragment, NodeFilter.SHOW_TEXT)
-
-  while (true) {
-    const node = walker.nextNode()
-
-    if (!node || node.parentNode.nodeName === 'TITLE') {
-      break
-    }
-
-    const matches = node.nodeValue.match(identifier) || []
-
-    contents = matches.reduce(rewrite, contents)
-  }
-
-  if (!doctype.length) {
-    contents = wrap(contents)
-  }
-
-  return {
-    doctype,
-    node: tree(parse(parser, doctype, contents))
-  }
+function wrap (source) {
+  return `<template>${source}</template>`
 }
 
 export function template (window, source = '', { ...data } = {}) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lcf.vs/dom-engine",
-  "version": "1.1.4",
+  "version": "2.0.0",
   "description": "A composable DOM based template engine",
   "type": "module",
   "main": "lib/engine.js",

readme.md

@@ -10,16 +10,27 @@ A composable DOM based template engine
 
 ## Usage
 
+### Markers
+
+There is 2 type of markers:
+
+* **Required**: `{name}`
+  * The value can't be nullish
+* **Optional**: `{?name}`
+  * If a nullish value is provided for an attribute, that attribute is removed
+
+
 ### Create a fragment template
 
 ```js
 import { template } from '@lcf.vs/dom-engine/backend.js'
 
 const pTemplate = template(`
-<p>{salutations} {name}</p>
+<p class="{?classes}">{salutations} {name}</p>
 `, {
-  salutations: null, // required
-  name: '' //optional
+  classes: null,
+  salutations: null,
+  name: null
 })
 ```