@longform/longform 0.0.18 → 0.0.19

package/dist/longform.js

@@ -1,14 +1,13 @@
-const LINE = 0, INDENT = 1, DIRECTIVE_KEY = 2, DIRECTIVE = 3, DIRECTIVE_INLINE_ARGS = 4, ID_TYPE = 5, ID = 6, 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
+const LINE = 0, INDENT = 1, DIRECTIVE_KEY = 2, DIRECTIVE = 3, DIRECTIVE_INLINE_ARGS = 4, ID_TYPE = 5, ID = 6, FRAGMENT_TYPE = 7, ELEMENT = 8, ATTR = 9, 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.
-, outer = /([a-z][\w\-]*(?::[a-z][\w\-]*)?)((?:(?:[^:])|(?::(?!:)))*)::(?: (?:({{?)|(.*)))?/gi
+, outerRe = /([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, m2, m3, m4;
+, 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 = null, m2 = null, m3 = null, m4 = null;
 const entities = {
     '&': '&amp;',
     '<': '&lt;',
@@ -44,6 +43,7 @@ function makeElement(indent = 0) {
 }
 function makeFragment(type = 'bare') {
     return {
+        id: undefined,
         type,
         html: '',
         template: false,
@@ -99,10 +99,10 @@ 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.
  */
-function longform(input, args) {
-    let textIndent = null, verbatimSerialize = true, verbatimIndent = null, verbatimFirst = false, element = makeElement(), fragment = makeFragment()
+async function longform(input, args) {
+    let skipping = false, verbatimText = '', verbatimIndent = 0, verbatimType = 0, element = makeElement(), fragment = makeFragment(), directive
     // the root fragment
-    , root = null, id = args?.id, lang = args?.lang, dir = args?.dir, meta = {}, doc;
+    , root = null, id = args?.id, lang = args?.lang, dir = args?.dir, meta = {}, data = {}, doc, asyncCount = 0;
     // ids of claimed fragments
     const claimed = new Set()
     // parsed fragments
@@ -110,7 +110,7 @@ function longform(input, args) {
         id: { attr: ctx => ctx.doc.id },
         dir: { attr: ctx => ctx.doc.dir },
         lang: { attr: ctx => ctx.doc.lang },
-    };
+    }, promises = [];
     let key = args?.key;
     if (!args?.predictable && key == null) {
         const arr = new Uint8Array(10);
@@ -124,245 +124,200 @@ function longform(input, args) {
     output.templates = {};
     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) {
-        if (Array.isArray(element.beforeRender)) {
-            const el = {
-                id: element.id,
-                tag: element.tag,
-                class: element.class,
-                attrs: element.attrs,
-            };
-            const chain = [];
-            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.beforeRender({
-                    el,
-                    chain,
-                    doc: 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;
         }
-        if (element.tag != null) {
-            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 if (fragment.template) {
+            fragment.html += m1[0];
+        }
+        const indent = m1[INDENT].length / 2;
+        // only one root fragment is allowed. Skip until beginning of next fragment / directive.
+        if (skipping && indent !== 0)
+            continue;
+        if (skipping)
+            skipping = false;
+        // 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], '');
                 }
+                continue;
             }
-            if (element.mount !== undefined) {
-                fragment.html += ` data-${key}-mount="${element.mount}"`;
+            else if (m1[0].trim() === '' &&
+                input.length !== m1.index + m1[0].length) {
+                // blank line in verbatim
+                if (verbatimType !== 1)
+                    verbatimText += '\n';
+                continue;
             }
-            fragment.html += '>';
-            if (Array.isArray(element.chain)) {
-                let chained;
-                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 {
+                // 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,
+                            });
+                        }
+                        applyIndent(indent, key, element, fragment, doc, parsed, output, args);
+                        break;
+                    case 2:
+                        // escaped preformatted text
+                        fragment.html += escape(verbatimText);
+                        break;
+                    case 3:
+                        // preformatted
+                        fragment.html += verbatimText + '\n';
+                        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 = [];
+                            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) && element.text != null) {
-                fragment.html += element.text;
-            }
-            if (!voids.has(element.tag)) {
-                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();
-                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 <= verbatimIndent) {
-                fragment.html += '\n';
-                applyIndent(indent);
-                verbatimIndent = null;
-                verbatimFirst = false;
-                textIndent = indent;
-                if (preformattedClose.test(m1[0])) {
+                verbatimType = 0;
+                verbatimText = '';
+                if (preformatClose.has(m1[0].trim()))
                     continue;
-                }
             }
-            else {
-                const line = m1[0].replace('  '.repeat(verbatimIndent + 1), '');
-                if (element.tag != null) {
-                    applyIndent(indent);
-                }
-                if (verbatimFirst) {
-                    verbatimFirst = false;
-                }
-                else {
-                    fragment.html += '\n';
-                }
-                if (verbatimSerialize) {
-                    fragment.html += line;
-                }
-                else {
-                    fragment.html += escape(line);
-                }
-                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}`);
+                        console.warn(`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;
-                    }
-                }
             }
-            doc = new Doc(id, lang, dir, meta, args?.allowAll, args?.allowedAttributes, args?.allowedElements);
-            if (args?.outputMode === 'meta') {
+            const def = directives[m1[DIRECTIVE]];
+            if (typeof def?.meta === 'function' || parseBlock) {
+                verbatimIndent = indent + 1;
+                verbatimType = 4;
+                directive = {
+                    name: m1[DIRECTIVE],
+                    inlineArgs,
+                    def,
+                };
+                continue main;
+            }
+            if (args?.outputMode === 'head') {
                 return {
                     key,
                     id,
                     lang,
                     dir,
-                    meta: doc.meta,
+                    meta,
+                    data,
                 };
             }
+            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];
                 if (indent === 0) {
                     if (m1[FRAGMENT_TYPE] == '[') {
@@ -383,104 +338,93 @@ function longform(input, args) {
                     element.id = fragment.id;
                 }
                 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 = {
-                                ...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;
                     let inlineText;
                     if (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) ;
+                        if (root != null) {
+                            // skip if root is found and this fragment
+                            // has no id
+                            skipping = true;
+                        }
                         else {
                             fragment.type = 'root';
                             root = fragment;
                         }
                     }
                     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;
                         preformattedType = m2[3];
                         inlineText = m2[4];
@@ -495,9 +439,9 @@ function longform(input, args) {
                             working.tag = m2[1];
                             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];
                             }
@@ -514,8 +458,8 @@ function longform(input, args) {
                                 let value = 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]];
                                         if (def != null && typeof def.attr === 'function') {
@@ -530,20 +474,21 @@ function longform(input, args) {
                                 }
                                 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;
                                 }
                             }
                         }
@@ -553,29 +498,33 @@ function longform(input, args) {
                     // 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') {
                         if (element.id == null) {
@@ -598,69 +547,24 @@ function longform(input, args) {
                     }
                     break;
                 }
-            }
-            default: {
-                m2 = text1.exec(m1[0]);
-                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;
-            }
-        }
-    }
-    applyIndent(0);
-    const arr = Array.from(parsed.values());
-    function flatten(fragment) {
-        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);
-                }
-            }
+            default:
+                if (element.tag !== undefined)
+                    [element, fragment] = applyIndent(indent, key, element, fragment, doc, parsed, output, args);
+                verbatimText = m1[0].trim();
+                verbatimIndent = indent;
+                verbatimType = 1;
         }
-        fragment.refs = [];
-        return fragment;
     }
+    applyIndent(0, key, element, fragment, doc, parsed, output, args);
+    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;
         if (i === 0 && root == null) {
@@ -675,33 +579,31 @@ function longform(input, args) {
         if (fragment.refs == null || fragment.refs.length === 0) {
             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;
-        const fragment = arr[i];
-        if (fragment == null || claimed.has(fragment.id)) {
+        if (f == null || claimed.has(f.id)) {
             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] = {
-            id: fragment.id,
+        output.fragments[f.id] = {
+            id: f.id,
             selector,
-            type: fragment.type,
-            html: fragment.html,
+            type: f.type,
+            html: f.html,
         };
     }
     output.key = key;
@@ -719,9 +621,9 @@ function longform(input, args) {
  * @param getFragment - A function which returns an already processed fragment's HTML string.
  * @returns The processed template.
  */
-function processTemplate(template, args, getFragment) {
-    const lf = template.replace(templateRe, (_match, param, ref) => {
-        if (ref != null) {
+async function processTemplate(template, args, longformArgs, getFragment) {
+    const lf = template.replace(templateRe, (_line, _structured, param, ref) => {
+        if (ref !== undefined && typeof getFragment === 'function') {
             const fragment = getFragment(ref);
             if (fragment == null)
                 return '';
@@ -729,7 +631,156 @@ function processTemplate(template, args, getFragment) {
         }
         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, key, element, fragment, doc, parsed, output, args) {
+    if (element.tag !== undefined) {
+        if (Array.isArray(element.beforeRender)) {
+            const el = {
+                id: element.id,
+                tag: element.tag,
+                class: element.class,
+                attrs: element.attrs,
+            };
+            const chain = [];
+            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({
+                    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;
+            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) && element.text != null) {
+            fragment.html += element.text;
+        }
+        if (!voids.has(element.tag)) {
+            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();
+            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, claimed, parsed, locals = new Set()) {
+    let r;
+    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), 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;
+    return fragment;
 }
 
 export { longform, processTemplate };