@longform/longform 0.0.18 → 0.0.19

package/lib/longform.ts

@@ -1,4 +1,4 @@
-import type { AppliedDirective, DirectiveDef, FragmentType, LongformArgs, ParsedResult, SerializationElement, SerializerConfig, SimplifiedElement, WorkingElement, WorkingFragment } from "./types.ts";
+import type { DirectiveDef, Element, ElementCtx, FragmentRef, FragmentType, LongformArgs, ParsedResult, SerializationElement, SerializerConfig, WorkingElement, WorkingFragment } from "./types.ts";
 
 const LINE = 0
     , INDENT = 1
@@ -10,35 +10,32 @@ const LINE = 0
     , FRAGMENT_TYPE = 7
     , ELEMENT = 8
     , ATTR = 9
-;
-
-const sniffTestRe = /^((?:  )*)(?:(@)([a-z][a-z\-]*(?::[a-z][a-z\-]*)?)(?:(?::: (.*))| *)?|(##?)([a-z][a-z\-]*)(?: ?(?: +([\["]))? *|(?: *))?|(?:[a-z][a-z\-]*(?::[a-z][a-z\-])?.*(::).*)|(?:(\[)[a-z][a-z\-]?.*(?:=.+)?\]\w*)|(.+))$/gmi
-
-  // captures a single element definition which could be in a chain.
-  // id, class and attributes are matched as a single block for a later loop
-  // if in chained situation the regexp will need to be looped over for each element
-  // we know the element is the last if the final capture group has a positive match
-  // or if the line is consumed by the regexp.
-  , outer = /([a-z][\w\-]*(?::[a-z][\w\-]*)?)((?:(?:[^:])|(?::(?!:)))*)::(?: (?:({{?)|(.*)))?/gi
-
-  // captures each id, class and attribute declaration in an element
-  , inner = /(?:\.([a-z][\w\-]+)|#([a-z][\w\-]+)|\[([a-z][a-z\-]+(?::[a-z][a-z|\-]*)?)(?:=(?:"([^"]+)"|'([^']+)'|([^\]]+)))?\])/gi
-  , attribute1 = /((?:\ \ )+)\[(\w[\w-]*(?::\w[\w-]*)?)(?:=([^\n]+))?\]/
-  , directiveAttr = /^@([a-z][\w\-]*(?::[a-z][\w\-]*)?)$/i
-  , preformattedClose = /[ \t]*}}?[ \t]*/
-  , id1 = /((?:\ \ )+)?#(#)?([\w\-]+)(?: ([\["]))?/gmi
-  , identRe = /^(\ \ )+/
-  , text1 = /^((?:\ \ )+)([^ \n][^\n]*)$/i
-  , refRe = /#\[([\w\-]+)\]/g
-  , escapeRe = /([&<>"'#\[\]{}])/g
-  , templateLinesRe = /^(\ \ )?([^\n]+)$/gmi
-  , templateRe = /\#\{(@)?([a-z][\w\-]*(?::[a-z][\w\-]*))}/g
-  , voids = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wrb']);
-
-let m1: RegExpExecArray | null
-  , m2: RegExpExecArray | null
-  , m3: RegExpExecArray | null
-  , m4: RegExpExecArray | null
+    , COMMENT = 10
+    , sniffTestRe = /^((?:  )*)(?:(@)([a-z][a-z\-]*(?::[a-z][a-z\-]*)?)(?:(?:(?::: (.*)))|(?:::)? *)?|(##?)([a-z][a-z\-]*)(?: ?(?: +([\["]))? *|(?: *))?|(?:[a-z][a-z\-]*(?::[a-z][a-z\-])?.*(::).*)|(?:(\[)[a-z][a-z\-]?.*(?:=.+)?\]\w*)|(--).*|(.+))$/gmi
+
+    // captures a single element definition which could be in a chain.
+    // id, class and attributes are matched as a single block for a later loop
+    // if in chained situation the regexp will need to be looped over for each element
+    // we know the element is the last if the final capture group has a positive match
+    // or if the line is consumed by the regexp.
+    , outerRe = /([a-z][\w\-]*(?::[a-z][\w\-]*)?)((?:(?:[^:])|(?::(?!:)))*)::(?: (?:({{?)|(.*)))?/gi
+
+    // captures each id, class and attribute declaration in an element
+    , innerRe = /(?:\.([a-z][\w\-]+)|#([a-z][\w\-]+)|\[([a-z][a-z\-]+(?::[a-z][a-z|\-]*)?)(?:=(?:"([^"]+)"|'([^']+)'|([^\]]+)))?\])/gi
+    , attributeRe = /((?:\ \ )+)\[(\w[\w-]*(?::\w[\w-]*)?)(?:=([^\n]+))?\]/
+    , attributeDirectiveRe = /^@([a-z][\w\-]*(?::[a-z][\w\-]*)?)$/i
+    , idRe = /((?:\ \ )+)?#(#)?([\w\-]+)(?: ([\["]))?/i
+    , refRe = /#\[([\w\-]+)\]/g
+    , escapeRe = /([&<>"'#\[\]{}])/g
+    , templateLinesRe = /^(\ \ )?([^\n]+)$/gm
+    , templateRe = /#(#)?{([a-z][\w\-]*(?::[a-z][\w\-]*)?)}|#\[([a-z][\w\-]*(?::[a-z][\w\-]*)?)\]/g
+    , preformatClose = new Set(['}', '}}'])
+    , voids = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wrb']);
+
+let m1: RegExpExecArray | null = null
+  , m2: RegExpExecArray | null = null
+  , m3: RegExpExecArray | null = null
+  , m4: RegExpExecArray | null = null
 
 const entities = {
   '&': '&amp;',
@@ -55,7 +52,7 @@ const entities = {
 
 function escape(value: string): string {
   return value.replace(escapeRe, (match) => {
-    return entities[match] ?? match;
+    return entities[match as keyof typeof entities] ?? match;
   });
 }
 
@@ -64,7 +61,7 @@ function makeElement(indent: number = 0): WorkingElement {
     indent,
     key: undefined,
     id: undefined,
-    tag: undefined,
+    tag: undefined as unknown as string,
     class: undefined,
     text: undefined,
     attrs: {},
@@ -78,6 +75,7 @@ function makeElement(indent: number = 0): WorkingElement {
 
 function makeFragment(type: FragmentType = 'bare'): WorkingFragment {
   return {
+    id: undefined as unknown as string,
     type,
     html: '',
     template: false,
@@ -153,24 +151,30 @@ const directiveValidator = /^[a-z][a-z\-]*\:[a-z][a-z\-]*$/i;
  * @param input - The Longform document to parse.
  * @param args - Arguments for the Longform parser.
  */
-export function longform(
+export async function longform(
   input: string,
   args?: LongformArgs,
-): ParsedResult {
+): Promise<ParsedResult> {
   let skipping: boolean = false
-    , textIndent: number | null = null
-    , verbatimSerialize: boolean = true
-    , verbatimIndent: number | null = null
-    , verbatimFirst: boolean = false
+    , verbatimText: string = ''
+    , verbatimIndent: number = 0
+    , verbatimType: number = 0
     , element: WorkingElement = makeElement()
     , fragment: WorkingFragment = makeFragment()
+    , directive!: {
+        name: string;
+        inlineArgs: string;
+        def?: DirectiveDef,
+      }
     // the root fragment
     , root: WorkingFragment | null = null
     , id: string | undefined = args?.id
     , lang: string | undefined = args?.lang
     , dir: string | undefined = args?.dir
     , meta: Record<string, unknown> = {}
-    , doc: Doc | undefined
+    , data: Record<string, unknown> = {}
+    , doc!: Doc
+    , asyncCount: number = 0;
     // ids of claimed fragments
   const claimed: Set<string> = new Set()
     // parsed fragments
@@ -183,9 +187,10 @@ export function longform(
         dir: { attr: ctx => ctx.doc.dir },
         lang: { attr: ctx => ctx.doc.lang },
     }
+    , promises: Array<Promise<void>> = []
 
   let key: string = args?.key as string;
-
+  
   if (!args?.predictable && key == null) {
     const arr = new Uint8Array(10);
 
@@ -202,290 +207,221 @@ export function longform(
   if (args?.directives != null) {
     const entries = Object.entries(args.directives);
 
-    for (let i = 0, l = entries.length; i < l; i++) {
-      if (!directiveValidator.test(entries[i][0])) {
-        console.warn(`Invalid custom directive name '${entries[i][0]}'`);
+    for (let i = 0, l = entries.length, e = entries[i]; i < l; i++) {
+      if (!directiveValidator.test(e[0])) {
+        console.warn(`Invalid custom directive name '$e{[0]}'`);
 
         continue;
       }
   
-      directives[entries[i][0]] = entries[i][1];
+      directives[e[0]] = e[1];
     }
   }
 
-  /**
-   * Closes any current in progress element definition
-   * and creates a new working element.
-   */
-  function applyIndent(targetIndent: number) {
-    if (Array.isArray(element.beforeRender)) {
-      const el: SimplifiedElement = {
-        id: element.id,
-        tag: element.tag as string,
-        class: element.class,
-        attrs: element.attrs,
-      };
-      const chain: SimplifiedElement[] = [];
-
-      for (let i = 0, l = element.chain.length, el = element.chain[i]; i < l; i++) {
-        chain.push({
-          id: el.id,
-          tag: el.tag as string,
-          class: el.class,
-          attrs: el.attrs,
-        });
-      }
-
-      for (let i = 0, l = element.beforeRender.length, def = element.beforeRender[i]; i < l; i++) {
-        def.beforeRender({
-          el,
-          chain,
-          doc: doc as Doc,
-          inlineArg: def.inlineArg,
-          blockArg: def.blockArg,
-        });
-      }
+  // This is a hack to allow open verbatim blocks to detect
+  // when they close via an extra step in the loop.
+  input += '\n  ';
+  sniffTestRe.lastIndex = 0;
+  main: while ((m1 = sniffTestRe.exec(input))) {
+    if (m1[COMMENT] === '--') {
+      continue;
+    } else if (fragment.template) {
+      fragment.html += m1[0];
     }
 
-    if (element.tag != null) {
-      const root = fragment.type === 'range'
-        ? targetIndent < 2
-        : fragment.html === ''
-      ;
+    const indent = m1[INDENT].length / 2;
 
-      fragment.html += `<${element.tag}`
+    // only one root fragment is allowed. Skip until beginning of next fragment / directive.
+    if (skipping && indent !== 0) continue;
+    if (skipping) skipping = false;
 
-      if (element.id !== undefined) {
-        fragment.html += ' id="' + element.id + '"';
-      }
-
-      if (element.class !== undefined) {
-        fragment.html += ' class="' + element.class + '"';
-      }
-
-      for (const attr of Object.entries(element.attrs)) {
-        if (attr[0] === 'id' || attr[0] === 'class') continue;
-        if (attr[1] == null) {
-          fragment.html += ' ' + attr[0]
+    
+    // verbatim blocks collect the string as is and do processing on it
+    // once the full block has been collected into one string
+    if (verbatimType !== 0) {
+      if (indent >= verbatimIndent && (
+        verbatimType !== 1 || // text verbatim type should exit when other symbols are parsed
+        (m1[DIRECTIVE_KEY] ?? m1[ID_TYPE] ?? m1[ELEMENT] ?? m1[ATTR]) === undefined
+      )) {
+        // still in verbatim block
+        if (verbatimType === 1) {
+          verbatimText += ' ' + m1[0].trim();
         } else {
-          fragment.html += ` ${attr[0]}="${attr[1]}"`;
-        }
-      }
-
-      if (root) {
-        if (fragment.type === 'root') {
-          fragment.html += ` data-${key}-root`;
-        } else if (fragment.type === 'bare' || fragment.type === 'range') {
-          fragment.html += ` data-${key}="${fragment.id}"`;
-        } else if (fragment.type === 'embed' && !args?.predictable) {
-          fragment.html += ` data-${key}="${fragment.id}"`;
+          if (verbatimText !== '') verbatimText += '\n';
+          
+          verbatimText += m1[0].replace(m1[INDENT], '');
         }
-      }
-
-      if (element.mount !== undefined) {
-        fragment.html += ` data-${key}-mount="${element.mount}"`;
-      }
-
-      fragment.html += '>';
-
-      if (Array.isArray(element.chain)) {
-        let chained: WorkingElement;
+        continue;
+      } else if (m1[0].trim() === '' &&
+                 input.length !== m1.index + m1[0].length) {
+        // blank line in verbatim
+        if (verbatimType !== 1) verbatimText += '\n';
 
-        for (let i = 0, l = element.chain.length; i < l; i++) {
-          chained = element.chain[i];
+        continue;
+      } else {
+        // verbatim block is finished
+        switch (verbatimType) {
+          case 1:
+            // text
+            fragment.html += verbatimText;
+
+            // locate reference points in text
+            while ((m2 = refRe.exec(verbatimText))) {
+              const start = fragment.html.length + m2.index - verbatimText.length;
+
+              fragment.refs.push({
+                id: m2[1],
+                start,
+                end: start + m2[0].length,
+              });
+            }
 
-          fragment.html += '<' + chained.tag;
+            applyIndent(indent, key, element, fragment, doc, parsed, output, args);
+            break
+          case 2:
+            // escaped preformatted text
+            fragment.html += escape(verbatimText);
 
-          if (chained.id !== undefined) {
-            fragment.html += ' id="' + chained.id + '"';
-          }
+            break;
+          case 3:
+            // preformatted
+            fragment.html += verbatimText + '\n';
 
-          if (chained.class != undefined) {
-            fragment.html += ' class="' + chained.class + '"';
-          }
+            break;
+          case 4:
+            // directive block args
+            if (directive.def == null) break;
+            if (doc == null) {
+              if (typeof directive.def.meta === 'function') {
+                meta[m1[DIRECTIVE]] = directive.def.meta({
+                  inlineArgs: directive.inlineArgs,
+                  blockArgs: verbatimText,
+                });
+              }
+            } else if (typeof directive.def.render === 'function') {
+              try {
+                element.html += directive.def.render({
+                  doc,
+                  inlineArgs: directive.inlineArgs,
+                  blockArgs: verbatimText,
+                });
+              } catch (err) {
+                console.error(`Error in calling directive ${directive.name}`)
+                console.error(err)
+              }
+            } else if (typeof directive.def.asyncRender === 'function') {
+              asyncCount++;
+              
+              // async rendering uses the #[ref] feature to insert the
+              // eventual response. 
+              const directiveFragment = makeFragment('embed');
+
+              directiveFragment.id = `@${asyncCount}`;
+              parsed.set(directiveFragment.id, directiveFragment);
+
+              fragment.refs.push({
+                id: directiveFragment.id,
+                start: fragment.html.length,
+                end: fragment.html.length,
+              });
+              
+              promises.push(
+                directive.def.asyncRender({
+                  doc,
+                  inlineArgs: directive.inlineArgs,
+                  blockArgs: verbatimText,
+                }).then(res => {
+                  directiveFragment.html = res ?? '';
+                }).catch(err => {
+                  console.error(`Error in calling directive ${directive.name}`)
+                  console.error(err)
+                })
+              );
+            } else if (typeof directive.def.element === 'function') {
+              if (element.beforeRender == null) element.beforeRender = [];
 
-          for (const attr of Object.entries(chained.attrs)) {
-            if (attr[1] === undefined) {
-              fragment.html += ' ' + attr[0]
+              element.beforeRender.push({
+                blockArgs: verbatimText,
+                inlineArgs: directive.inlineArgs,
+                element: directive.def.element,
+              });
             } else {
-              fragment.html += ` ${attr[0]}="${attr[1]}"`;
+              console.warn(`Directive used in incorrect context ${directive.name}`);
             }
-          }
-
-          fragment.html += '>';
-        }
-      }
-
-      if (!voids.has(element.tag as string) && element.text != null) {
-        fragment.html += element.text;
-      }
-
-      if (
-        !voids.has(element.tag as string)
-      ) {
-        fragment.els.push(element);
-      }
-    }
-
-    if (targetIndent <= element.indent) {
-      element = makeElement(targetIndent);
-
-      while (
-        fragment.els.length !== 0 && (
-          targetIndent == null ||
-          fragment.els[fragment.els.length - 1].indent !== targetIndent - 1
-        )
-      ) {
-        const element = fragment.els.pop() as WorkingElement;
-
-        if (Array.isArray(element.chain)) {
-          for (let i = 0, l = element.chain.length; i < l; i++) {
-            fragment.html += `</${element.chain[i].tag}>`;
-          }
-        }
-
-        fragment.html += `</${element?.tag}>`;
-      }
-
-      if (targetIndent === 0) {
-        if (fragment.template) {
-          output.templates[fragment.id] = fragment.html;
-        } else if (fragment.type === 'root') {
-          root = fragment;
-        } else {
-          parsed.set(fragment.id, fragment);
-        }
-
-        fragment = makeFragment();
-      }
-    } else {
-      element = makeElement(targetIndent)
-    }
-  }
-
-  main: while ((m1 = sniffTestRe.exec(input))) {
-    if (m1[1] === '--') {
-      continue;
-    } else if (fragment.template) {
-      fragment.html += m1[0];
-    }
-
-    // If this is a script tag or preformatted block
-    // we want to retain the intended formatting less
-    // the indent. Pre-formatting can apply to any element
-    // by ending the declaration with `:: {`.
-    if (verbatimIndent != null) {
-      // inside a script or preformatted block
-      identRe.lastIndex = 0;
-      m2 = identRe.exec(m1[0]);
-      const indent = m2 == null
-        ? null
-        : m2[0].length / 2;
-
-      if (m2 == null || indent as number <= verbatimIndent) {
-        fragment.html += '\n';
-
-        applyIndent(indent);
-        verbatimIndent = null;
-        verbatimFirst = false;
-        textIndent = indent;
-
-        if (preformattedClose.test(m1[0])) {
-          continue;
         }
-      } else {
-        const line = m1[0].replace('  '.repeat(verbatimIndent + 1), '');
 
-        if (element.tag != null) {
-          applyIndent(indent as number);
-        }
+        verbatimType = 0;
+        verbatimText = '';
 
-        if (verbatimFirst) {
-          verbatimFirst = false;
-        } else {
-          fragment.html += '\n';
-        }
-        
-        if (verbatimSerialize) {
-          fragment.html += line;
-        } else {
-          fragment.html += escape(line);
-        }
-
-        continue;
+        if (preformatClose.has(m1[0].trim())) continue;
       }
-    }
+    } // end verbatim
 
     if (m1[LINE].trim() === '') {
+      // empty lines have no effect from here on
       continue;
     }
 
-    // The id and lang directives should proceed all other directives and 
-    // fragment declarations.
     if (doc === undefined) {
+      // The meta directives get special treatment.
+      let parseBlock = false;
       const inlineArgs = m1[DIRECTIVE_INLINE_ARGS] ?? '';
-
+      
       switch (m1[DIRECTIVE]) {
-        case 'id': {
+        case 'id':
           const url = inlineArgs.trim();
+
+          parseBlock = true;
+
           try {
             id = id ?? new URL(url, args?.base).toString();
           } catch (err) {
             console.warn(
-              `Invalid URL given to @id directive: ${url} base=${args.base}`
+              `Invalid URL given to @id directive: ${url} base=${args?.base}`
             );
           }
-          continue main;
-        }
-        case 'lang': {
+          break;
+        case 'lang':
+          parseBlock = true;
           lang = lang ?? inlineArgs.trim();
-          continue main;
-        }
-        case 'dir': {
+          break;
+        case 'dir':
+          parseBlock = true;
           dir = dir ?? inlineArgs.trim();
-          continue main;
-        }
-        default: {
-          const def = directives[m1[DIRECTIVE]];
-
-          if (typeof def?.meta === 'function') {
-            if (Object.keys(def).length > 1) {
-              throw new Error(
-                `A custom directive performing the meta role cannot be used for other purposes. ` +
-                `See @${m1[DIRECTIVE]}`,
-              );
-            }
+      }
 
-            meta[m1[DIRECTIVE]] = def.meta({ inlineArgs });
-            continue main;
-          }
+      const def = directives[m1[DIRECTIVE]];
+
+      if (typeof def?.meta === 'function' || parseBlock) {
+        verbatimIndent = indent + 1;
+        verbatimType = 4;
+        directive = {
+          name: m1[DIRECTIVE],
+          inlineArgs,
+          def,
         }
-      }
 
-      doc = new Doc(id, lang, dir, meta, args?.allowAll, args?.allowedAttributes, args?.allowedElements);
+        continue main;
+      }
 
-      if (args?.outputMode === 'meta') {
+      if (args?.outputMode === 'head') {
         return {
           key,
           id,
           lang,
           dir,
-          meta: doc.meta,
-        };
+          meta,
+          data,
+        } as unknown as ParsedResult;
       }
+
+      doc = new Doc(id, lang, dir, meta, args?.allowAll, args?.allowedAttributes, args?.allowedElements);
     }
 
     switch (m1[DIRECTIVE_KEY] ?? m1[ID_TYPE] ?? m1[ELEMENT] ?? m1[ATTR]) {
       case '#':
-      case '##': {
-        id1.lastIndex = 0;
-
-        const indent = (m1[INDENT].length ?? 0) / 2;
-
-        if (element.tag != null || textIndent != null) {
-          applyIndent(indent);
-          textIndent = null;
-        }
+      case '##':
+        [element, fragment] = applyIndent(indent, key, element, fragment, doc, parsed, output, args);
 
         fragment.id = m1[ID];
 
@@ -505,90 +441,76 @@ export function longform(
         }
 
         break;
-      }
-      case '@': {
-        const indent = m1[INDENT].length / 2;
-
-        if (element.tag != null || textIndent != null) {
-          applyIndent(indent);
+      case '@':
+        if (element.tag !== undefined) {
+          [element, fragment] = applyIndent(indent, key, element, fragment, doc, parsed, output, args);
         }
 
+        const inlineArgs = m1[DIRECTIVE_INLINE_ARGS] ?? ''
+
         switch (m1[DIRECTIVE]) {
-          case 'doctype': {
-            const args = m1[DIRECTIVE_INLINE_ARGS] ?? 'html';
-            fragment.html += `<!doctype ${args.trim()}>`;
-            break;
-          }
-          case 'xml': {
-            const args = m1[DIRECTIVE_INLINE_ARGS] ?? 'version="1.0" encoding="UTF-8"';
-            fragment.html += `<?xml ${args.trim()}?>`;
-            break;
-          }
-          case 'template': {
-            let indented = false;
-            fragment.template = indent === 0;
-
-            templateLinesRe.lastIndex = sniffTestRe.lastIndex;
-            while ((m2 = templateLinesRe.exec(input))) {
-              if (m2[1] == null && !indented && fragment.id == null) {
-                id1.lastIndex = 0;
-                m3 = id1.exec(m2[0]);
-
-                if (m3 != null) fragment.id = m3[3];
-
-                fragment.html += m2[0];
-              } else if (m2[1] == null && indented) {
-                sniffTestRe.lastIndex = templateLinesRe.lastIndex - m2[0].length;
-                break;
-              } else {
-                fragment.html += '\n' + m2[0];
-                if (m2[1] != null) indented = true;
+          case 'template':
+            if (indent === 0) {
+              let indented = false;
+              fragment.template = true;
+
+              templateLinesRe.lastIndex = sniffTestRe.lastIndex;
+              while ((m2 = templateLinesRe.exec(input))) {
+                if (m2[1] == null && !indented && fragment.id == null) {
+                  m3 = idRe.exec(m2[0]);
+
+                  if (m3 != null) fragment.id = m3[3];
+
+                  fragment.html += m2[0];
+                } else if (m2[1] == null && indented) {
+                  sniffTestRe.lastIndex = templateLinesRe.lastIndex - m2[0].length;
+                  break;
+                } else {
+                  fragment.html += '\n' + m2[0];
+                  if (m2[1] != null) indented = true;
+                }
               }
+
+              [element, fragment] = applyIndent(0, key, element, fragment, doc, parsed, output, args);
             }
 
-            applyIndent(0);
+            continue main;
+          case 'doctype':
+            fragment.html += `<!doctype ${(inlineArgs.trim() || 'html').trim()}>`;
             break;
-          }
-          case 'mount': {
-            if (m1[DIRECTIVE_INLINE_ARGS] == null) {
-              throw new Error('Mount points must have a name');
+          case 'xml':
+            fragment.html += `<?xml ${inlineArgs.trim() || 'version="1.0" encoding="UTF-8"'}?>`;
+            break;
+          case 'mount':
+            if (args?.outputMode !== 'mountable') break;
+
+            if (inlineArgs === '') {
+              console.warn('Mount points must have a name');
             } else if (fragment.type !== 'root') {
-              throw new Error('Mounting is only allowed on a root element');
+              console.warn('Mounting is only allowed on a root element');
             }
 
             fragment.mountable = true;
-            element.mount = m1[DIRECTIVE_INLINE_ARGS].trim();
+            element.mount = inlineArgs.trim();
             break;
-          }
-          default: {
-            const def = directives[m1[DIRECTIVE]];
-
-            if (def == null) break;
-
-            if (typeof def.beforeRender === 'function') {
-              if (element.id != null) {
-                applyIndent(indent);
-              }
-
-              if (element.beforeRender == null) element.beforeRender = [];
-
-              // TODO: Parse block args
-              const applied: AppliedDirective = {
-                ...def,
-                inlineArg: m1[DIRECTIVE_INLINE_ARGS],
-              };
-
-              element.beforeRender.push(applied);
-            }
-          }
         }
 
+        const def = directives[m1[DIRECTIVE]];
+        
+        // A directive may not be defined but we want to process
+        // any block args to keep the output valid. Builtin directives
+        // will be ignored unless they require block args.
+        verbatimIndent = indent + 1;
+        verbatimType = 4;
+        directive = {
+          name: m1[DIRECTIVE],
+          inlineArgs: m1[DIRECTIVE_INLINE_ARGS],
+          def,
+        };
+
         break;
-      }
-      case '[':
-      case '::': {
+      case '::':
         if (m1[ELEMENT] !== undefined) {
-          const indent = (m1[INDENT]?.length ?? 0) / 2;
           let preformattedType: string | undefined;
           let inlineText: string | undefined;
 
@@ -596,12 +518,10 @@ export function longform(
             element.tag !== undefined ||
             element.indent > indent
           ) {
-            applyIndent(indent);
+            [element, fragment] = applyIndent(indent, key, element, fragment, doc, parsed, output, args);
           }
 
           element.indent = indent;
-
-          textIndent = null;
           
           if (indent === 0 && fragment.id == null) {
             if (root != null) {
@@ -615,12 +535,11 @@ export function longform(
           }
           
           const parent = element;
-          outer.lastIndex = 0;
-
+          outerRe.lastIndex = 0;
 
           // Looping through chained element declarations
           // foo#x.y::bar::free:: 
-          while ((m2 = outer.exec(m1[LINE]))) {
+          while ((m2 = outerRe.exec(m1[LINE]))) {
             let working: WorkingElement;
 
             preformattedType = m2[3];
@@ -636,9 +555,9 @@ export function longform(
               parent.chain.push(working);
             }
 
-            inner.lastIndex = 0;
+            innerRe.lastIndex = 0;
             // Looping through ids, classes and attrs
-            while((m3 = inner.exec(m2[2]))) {
+            while((m3 = innerRe.exec(m2[2]))) {
               if (m3[2] !== undefined) {
                 working.id = m3[2];
               } else if (m3[1] !== undefined) {
@@ -649,12 +568,12 @@ export function longform(
                 }
               } else {
                 // TODO: Preserve quoting style around attribute values
-                let value = m3[4] ?? m3[5] ?? m3[6];
+                let value: string | boolean | undefined | null = m3[4] ?? m3[5] ?? m3[6];
 
                 // attribute directives
                 if (value[0] === '@') {
-                  directiveAttr.lastIndex = 0;
-                  m4 = directiveAttr.exec(value);
+                  attributeDirectiveRe.lastIndex = 0;
+                  m4 = attributeDirectiveRe.exec(value);
                   
                   if (m4 != null) {
                     const def = directives[m4[1]];
@@ -671,19 +590,19 @@ export function longform(
 
                 switch (m3[3]) {
                   case 'id':
-                    if (!working.id) {
+                    if (!working.id && typeof value === 'string') {
                       working.id = value;
                     }
                     break;
                   case 'class':
-                    if (!working.class) {
+                    if (!working.class && typeof value === 'string') {
                       working.class = value;
-                    } else {
+                    } else if (typeof value === 'string') {
                       working.class += ' ' + value;
                     }
                     break;
                   default:
-                    working.attrs[m3[3]] = value;
+                    if (value !== false) working.attrs[m3[3]] = value;
                 }
               }
             }
@@ -694,31 +613,38 @@ export function longform(
           // server specific process.
           if (element.mount != null) {
             const id = element.mount;
-            applyIndent(indent + 1);
+            
+            [element, fragment] = applyIndent(indent + 1, key, element, fragment, doc, parsed, output, args);
+
+            if (fragment.mountPoints == null) fragment.mountPoints = [];
+            
             fragment.mountPoints.push({
               id,
               part: fragment.html,
             });
+
             fragment.html = '';
-            applyIndent(indent);
+            [element, fragment] = applyIndent(indent, key, element, fragment, doc, parsed, output, args);
             break;
           }
   
           if (preformattedType !== undefined) {
-            verbatimFirst = true;
-            verbatimIndent = indent;
-            verbatimSerialize = preformattedType === '{{';
+            if (element.tag !== undefined)
+              [element, fragment] = applyIndent(indent + 1, key, element, fragment, doc, parsed, output, args);
+
+            verbatimIndent = indent + 1;
+            verbatimType = preformattedType === '{{' ? 3 : 2
           } else if (inlineText !== undefined) {
             element.text = inlineText;
           }
 
           break;
         }
-
-        attribute1.lastIndex = 0;
+      case '[':
+        attributeRe.lastIndex = 0;
         m2 = m1[ATTR] !== undefined
-           ? attribute1.exec(m1[LINE])
-           : undefined;
+           ? attributeRe.exec(m1[LINE])
+           : null;
 
         if (m2 != null && element.tag != null) {
           if (m2[2] === 'id') {
@@ -739,84 +665,30 @@ export function longform(
 
           break;
         }
-      }
-      default: {
-        m2 = text1.exec(m1[0]) as RegExpExecArray;
+      default:
+        if (element.tag !== undefined)
+          [element, fragment] = applyIndent(indent, key, element, fragment, doc, parsed, output, args);
 
-        if (m2 == null) {
-          break;
-        }
-        const indent = m2[1].length / 2;
-        const tx = m2[2].trim();
-
-        if (element.tag != null) {
-          applyIndent(indent);
-
-          fragment.html += tx;
-        } else if (fragment.type === 'text' && fragment.html === '') {
-          fragment.html += tx;
-        } else {
-          fragment.html += ' ' + tx;
-        }
-
-        textIndent = indent;
-
-        while ((m2 = refRe.exec(tx))) {
-          const start = fragment.html.length + m2.index - tx.length;
-
-          fragment.refs.push({
-            id: m2[1],
-            start,
-            end: start + m2[0].length,
-          });
-        }
-
-        break;
-      }
+        verbatimText = m1[0].trim();
+        verbatimIndent = indent;
+        verbatimType = 1;
     }
   }
 
-  applyIndent(0);
-
-  const arr = Array.from(parsed.values());
-
-  function flatten(fragment: WorkingFragment): WorkingFragment {
-    if (fragment.refs == null) fragment.refs = [];
-
-    // work backwards so we don't change the html string length
-    // for the later replacements
-    for (let j = fragment.refs.length - 1; j >= 0; j--) {
-      const ref = fragment.refs[j];
-
-      if (claimed.has(ref.id) || !parsed.has(ref.id)) {
-        fragment.html = fragment.html.slice(0, ref.start)
-          + fragment.html.slice(ref.end)
-      } else {
-        const child = flatten(parsed.get(ref.id));
-
-        fragment.html = fragment.html.slice(0, ref.start)
-          + child.html
-          + fragment.html.slice(ref.end);
-
-        if (child.type === 'embed') {
-          claimed.add(child.id)
-        }
-      }
-    }
+  applyIndent(0, key, element, fragment, doc, parsed, output, args);
 
-    fragment.refs = [];
-
-    return fragment;
-  }
+  if (promises.length > 0) await Promise.all(promises);
 
   if (root?.mountable) {
     output.mountable = true;
     output.tail = root.html;
-    output.mountPoints = root.mountPoints;
+    output.mountPoints = root.mountPoints ?? [];
 
     return output;
   }
 
+  const arr = Array.from(parsed.values());
+
   for (let i = 0; i < parsed.size + 1; i++) {
     let fragment: WorkingFragment;
     
@@ -832,38 +704,36 @@ export function longform(
       continue;
     }
 
-    flatten(fragment)
+    flatten(fragment, claimed, parsed);
   }
-
+  
   if (root?.html != null) {
     output.root = root.html;
     output.selector = `[data-${key}-root]`;
   }
 
-  for (let i = 0; i < arr.length; i++) {
+  for (let i = 0, l = arr.length, f = arr[i]; i < l; i++) {
     let selector!: string;
-    const fragment: WorkingFragment = arr[i];
 
-    if (fragment == null || claimed.has(fragment.id as string)) {
+    if (f == null || claimed.has(f.id as string)) {
       continue;
     }
 
-    switch (fragment.type) {
-      case 'embed': {
+    switch (f.type) {
+      case 'embed':
         if (args?.predictable) {
-          selector = `[id=${fragment.id}]`;
+          selector = `[id=${f.id}]`;
           break;
         }
-      }
       case 'bare':
-      case 'range': selector = `[data-${key}=${fragment.id}]`;
+      case 'range': selector = `[data-${key}=${f.id}]`;
     }
 
-    output.fragments[fragment.id as string] = {
-      id: fragment.id as string,
+    output.fragments[f.id as string] = {
+      id: f.id as string,
       selector,
-      type: fragment.type as 'embed' | 'bare' | 'range',
-      html: fragment.html,
+      type: f.type as 'embed' | 'bare' | 'range',
+      html: f.html,
     };
   }
 
@@ -884,13 +754,14 @@ export function longform(
  * @param getFragment - A function which returns an already processed fragment's HTML string.
  * @returns The processed template.
  */
-export function processTemplate(
+export async function processTemplate(
   template: string,
   args: Record<string, string | number>,
-  getFragment: (fragment: string) => string | undefined,
-): string | undefined {
-  const lf = template.replace(templateRe, (_match, param, ref) => {
-    if (ref != null) {
+  longformArgs?: LongformArgs,
+  getFragment?: (fragment: string) => string | undefined,
+): Promise<string | undefined> {
+  const lf = template.replace(templateRe, (_line, _structured, param, ref) => {
+    if (ref !== undefined && typeof getFragment === 'function') {
       const fragment = getFragment(ref);
 
       if (fragment == null) return '';
@@ -901,6 +772,206 @@ export function processTemplate(
     return args[param] != null ? escape(args[param].toString()) : '';
   });
 
-  return Object.values(longform(lf).fragments)[0]?.html ?? null;
+  return Object.values((await longform(lf, longformArgs)).fragments)[0]?.html ?? null;
 }
 
+/**
+ * Closes any current in progress element definition
+ * and creates a new working element.
+ */
+function applyIndent(
+  targetIndent: number,
+  key: string,
+  element: WorkingElement,
+  fragment: WorkingFragment,
+  doc: Doc,
+  parsed: Map<string, WorkingFragment>,
+  output: ParsedResult,
+  args?: LongformArgs,
+): [element: WorkingElement, fragment: WorkingFragment] {
+  if (element.tag !== undefined) {
+    if (Array.isArray(element.beforeRender)) {
+      const el: Element = {
+        id: element.id,
+        tag: element.tag,
+        class: element.class,
+        attrs: element.attrs,
+      };
+      const chain: Element[] = [];
+
+      for (let i = 0, l = element.chain.length, el = element.chain[i]; i < l; i++) {
+        chain.push({
+          id: el.id,
+          tag: el.tag,
+          class: el.class,
+          attrs: el.attrs,
+        });
+      }
+
+      for (let i = 0, l = element.beforeRender.length, def = element.beforeRender[i]; i < l; i++) {
+        (def.element as (ctx: ElementCtx) => void)({
+          el,
+          chain,
+          doc,
+          inlineArgs: def.inlineArgs,
+          blockArgs: def.blockArgs,
+        });
+      }
+    }
+
+    const root = fragment.type === 'range'
+      ? targetIndent < 2
+      : fragment.html === ''
+    ;
+
+    fragment.html += `<${element.tag}`;
+
+    if (element.id !== undefined) {
+      fragment.html += ' id="' + element.id + '"';
+    }
+
+    if (element.class !== undefined) {
+      fragment.html += ' class="' + element.class + '"';
+    }
+
+    for (const attr of Object.entries(element.attrs)) {
+      if (attr[0] === 'id' || attr[0] === 'class') continue;
+      if (attr[1] == null) {
+        fragment.html += ' ' + attr[0]
+      } else {
+        fragment.html += ` ${attr[0]}="${attr[1]}"`;
+      }
+    }
+
+    if (root) {
+      if (fragment.type === 'root') {
+        fragment.html += ` data-${key}-root`;
+      } else if (fragment.type === 'bare' || fragment.type === 'range') {
+        fragment.html += ` data-${key}="${fragment.id}"`;
+      } else if (fragment.type === 'embed' && !args?.predictable) {
+        fragment.html += ` data-${key}="${fragment.id}"`;
+      }
+    }
+
+    if (element.mount !== undefined) {
+      fragment.html += ` data-${key}-mount="${element.mount}"`;
+    }
+
+    fragment.html += '>';
+
+    if (Array.isArray(element.chain)) {
+      let chained: WorkingElement;
+
+      for (let i = 0, l = element.chain.length; i < l; i++) {
+        chained = element.chain[i];
+
+        fragment.html += '<' + chained.tag;
+
+        if (chained.id !== undefined) {
+          fragment.html += ' id="' + chained.id + '"';
+        }
+
+        if (chained.class != undefined) {
+          fragment.html += ' class="' + chained.class + '"';
+        }
+
+        for (const attr of Object.entries(chained.attrs)) {
+          if (attr[1] === undefined) {
+            fragment.html += ' ' + attr[0]
+          } else {
+            fragment.html += ` ${attr[0]}="${attr[1]}"`;
+          }
+        }
+
+        fragment.html += '>';
+      }
+    }
+
+    if (!voids.has(element.tag as string) && element.text != null) {
+      fragment.html += element.text;
+    }
+
+    if (
+      !voids.has(element.tag as string)
+    ) {
+      fragment.els.push(element);
+    }
+  }
+
+  if (targetIndent <= element.indent) {
+    element = makeElement(targetIndent);
+
+    while (
+      fragment.els.length !== 0 && (
+        targetIndent == null ||
+        fragment.els[fragment.els.length - 1].indent !== targetIndent - 1
+      )
+    ) {
+      const element = fragment.els.pop() as WorkingElement;
+
+      if (Array.isArray(element.chain)) {
+        for (let i = 0, l = element.chain.length; i < l; i++) {
+          fragment.html += `</${element.chain[i].tag}>`;
+        }
+      }
+
+      fragment.html += `</${element?.tag}>`;
+    }
+
+    if (targetIndent === 0) {
+      if (fragment.template) {
+        output.templates[fragment.id] = fragment.html;
+      } else if (fragment.type !== 'root') {
+        parsed.set(fragment.id, fragment);
+      }
+
+      fragment = makeFragment();
+    }
+  } else {
+    element = makeElement(targetIndent)
+  }
+
+  return [element, fragment];
+}
+
+function flatten(
+  fragment: WorkingFragment,
+  claimed: Set<string>,
+  parsed: Map<string, WorkingFragment>,
+  locals: Set<string> = new Set(),
+): WorkingFragment {
+  let r: FragmentRef;
+  if (Array.isArray(fragment.refs)) {
+    for (let i = fragment.refs.length - 1; i > -1; i--) {
+      r = fragment.refs[i];
+
+      if (locals.has(r.id) || claimed.has(r.id) || !parsed.has(r.id)) {
+        // cannot use fragment here. Clear the reference marker
+        fragment.html = fragment.html.slice(0, r.start)
+          + fragment.html.slice(r.end)
+      } else {
+        locals.add(fragment.id);
+
+        const child = flatten(
+          parsed.get(r.id) as WorkingFragment,
+          claimed,
+          parsed,
+          locals,
+        );
+
+        fragment.html = fragment.html.slice(0, r.start)
+          + child.html
+          + fragment.html.slice(r.end);
+
+        if (child.type === 'embed') {
+          claimed.add(child.id)
+        }
+      }
+    }
+  }
+
+  // don't re-process the fragment
+  fragment.refs = undefined as unknown as FragmentRef[];
+
+  return fragment;
+}