@longform/longform 0.0.6 → 0.0.8

package/dist/longform.js

@@ -1,4 +1,17 @@
-const sniffTestRe = /^(?:(?:(--).*)|(?: *(@|#).*)|(?: *[\w\-]+(?::[\w\-]+)?(?:[#.[][^\n]+)?(::).*)|(?:  +([\["]).*)|(\ \ .*))$/gmi, element1 = /((?:\ \ )+)? ?([\w\-]+(?::[\w\-]+)?)([#\.\[][^\n]*)?::(?: ({{?|[^\n]+))?/gmi, directive1 = /((?:\ \ )+)? ?@([\w][\w\-]+)(?::: ?([^\n]+)?)?/gmi, attribute1 = /((?:\ \ )+)\[(\w[\w-]*(?::\w[\w-]*)?)(?:=([^\n]+))?\]/, preformattedClose = /[ \t]*}}?[ \t]*/, id1 = /((?:\ \ )+)?#(#)?([\w\-]+)(?: ([\["]))?/gmi, idnt1 = /^(\ \ )+/, text1 = /^((?:\ \ )+)([^ \n][^\n]*)$/i, paramsRe = /(?:(#|\.)([^#.\[\n]+)|(?:\[(\w[\w\-]*(?::\w[\w\-]*)?)(?:=([^\n\]]+))?\]))/g, refRe = /#\[([\w\-]+)\]/g, escapeRe = /([&<>"'#\[\]{}])/g, templateLinesRe = /^(\ \ )?([^\n]+)$/gmi, voids = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wrb']);
+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
+// 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
+, outer = /([a-z][\w\-]*(?::[a-z][\w\-]*)?)((?:(?:[^:])|(?::(?!:)))*)::(?: (?:({{?)|(.*)))?/gi
+//, 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]+))?\]/, preformattedClose = /[ \t]*}}?[ \t]*/, id1 = /((?:\ \ )+)?#(#)?([\w\-]+)(?: ([\["]))?/gmi, identRe = /^(\ \ )+/, text1 = /^((?:\ \ )+)([^ \n][^\n]*)$/i, refRe = /#\[([\w\-]+)\]/g, escapeRe = /([&<>"'#\[\]{}])/g, templateLinesRe = /^(\ \ )?([^\n]+)$/gmi
+// TODO: Benchmark v Array.includes()
+, voids = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wrb']);
 let m1, m2, m3;
 const entities = {
     '&': '&amp;',
@@ -20,8 +33,17 @@ function escape(value) {
 function makeElement(indent = 0) {
     return {
         indent,
-        html: '',
+        key: undefined,
+        id: undefined,
+        tag: undefined,
+        class: undefined,
+        text: undefined,
         attrs: {},
+        html: '',
+        mount: undefined,
+        serializerConfig: undefined,
+        chain: undefined,
+        beforeRender: undefined,
     };
 }
 function makeFragment(type = 'bare') {
@@ -35,28 +57,100 @@ function makeFragment(type = 'bare') {
         mountPoints: [],
     };
 }
+class Doc {
+    id = undefined;
+    lang = undefined;
+    meta = {};
+    #serializerConfig;
+    constructor(id, lang, allowAll, allowedAttributes, allowedElements) {
+        this.id = id;
+        this.lang = lang;
+        this.#serializerConfig = {
+            allowAll: allowAll ?? false,
+            allowedAttributes: allowedAttributes ?? [],
+            allowedElements: {},
+        };
+        if (allowedElements != null) {
+            for (let i = 0, l = allowedElements.length, el = allowedElements[i]; i < l; i++) {
+                if (typeof el === 'string') {
+                    this.#serializerConfig.allowedElements[el] = {
+                        tag: el,
+                        attrs: [],
+                    };
+                }
+                else {
+                    this.#serializerConfig.allowedElements[el.tag] = el;
+                }
+            }
+        }
+        Object.freeze(this);
+    }
+    allowAll() {
+    }
+    allowAttributes() {
+    }
+    allowElements() {
+    }
+}
+const directiveValidator = /^[a-z][a-z\-]*\:[a-z][a-z\-]*$/gi;
 /**
  * Parses a longform document into a object containing the root and fragments
  * in the output format.
  *
- * @param {string} doc - The longform document to parse.
- * @returns {ParsedResult}
+ * @param input - The Longform document to parse.
+ * @param args - Arguments for the Longform parser.
  */
-function longform(doc, debug = () => { }) {
+function longform(input, args) {
     let textIndent = null, verbatimSerialize = true, verbatimIndent = null, verbatimFirst = false, element = makeElement(), fragment = makeFragment()
     // the root fragment
-    , root = null;
+    , root = null, id, lang, doc;
     // ids of claimed fragments
     const claimed = new Set()
     // parsed fragments
-    , parsed = new Map(), output = Object.create(null);
+    , parsed = new Map(), output = Object.create(null), directives = {};
     output.fragments = Object.create(null);
     output.templates = Object.create(null);
+    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]}'`);
+                continue;
+            }
+            directives[entries[i][0]] = entries[i][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,
+                    inlineArg: def.inlineArg,
+                    blockArg: def.blockArg,
+                });
+            }
+        }
         if (element.tag != null) {
             const root = fragment.type === 'range'
                 ? targetIndent < 2
@@ -70,13 +164,13 @@ function longform(doc, debug = () => { }) {
                     fragment.html += ` data-lf="${fragment.id}"`;
                 }
             }
-            if (element.mount != null) {
+            if (element.mount !== undefined) {
                 fragment.html += ` data-lf-mount="${element.mount}"`;
             }
-            if (element.id != null) {
+            if (element.id !== undefined) {
                 fragment.html += ' id="' + element.id + '"';
             }
-            if (element.class != null) {
+            if (element.class !== undefined) {
                 fragment.html += ' class="' + element.class + '"';
             }
             for (const attr of Object.entries(element.attrs)) {
@@ -88,6 +182,28 @@ function longform(doc, debug = () => { }) {
                 }
             }
             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;
             }
@@ -100,10 +216,14 @@ function longform(doc, debug = () => { }) {
             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) {
-                debug(0, '<', fragment.type, fragment.id);
                 if (fragment.template) {
                     output.templates[fragment.id] = fragment.html;
                 }
@@ -120,7 +240,7 @@ function longform(doc, debug = () => { }) {
             element = makeElement(targetIndent);
         }
     }
-    while ((m1 = sniffTestRe.exec(doc))) {
+    main: while ((m1 = sniffTestRe.exec(input))) {
         if (m1[1] === '--') {
             continue;
         }
@@ -133,14 +253,13 @@ function longform(doc, debug = () => { }) {
         // by ending the declaration with `:: {`.
         if (verbatimIndent != null) {
             // inside a script or preformatted block
-            idnt1.lastIndex = 0;
-            m2 = idnt1.exec(m1[0]);
+            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';
-                debug(indent, '}', m2?.[0]);
                 applyIndent(indent);
                 verbatimIndent = null;
                 verbatimFirst = false;
@@ -151,7 +270,6 @@ function longform(doc, debug = () => { }) {
             }
             else {
                 const line = m1[0].replace('  '.repeat(verbatimIndent + 1), '');
-                debug(indent, '{', line);
                 if (element.tag != null) {
                     applyIndent(indent);
                 }
@@ -162,69 +280,148 @@ function longform(doc, debug = () => { }) {
                     fragment.html += '\n';
                 }
                 if (verbatimSerialize) {
-                    fragment.html += escape(line);
+                    fragment.html += line;
                 }
                 else {
-                    fragment.html += line;
+                    fragment.html += escape(line);
                 }
                 continue;
             }
         }
-        if (m1[0].trim() === '') {
+        if (m1[LINE].trim() === '') {
             continue;
         }
-        switch (m1[2] ?? m1[3] ?? m1[4]) {
-            // deno-lint-ignore no-fallthrough
-            case '#': {
+        // The id and lang directives should proceed all other directives and 
+        // fragment declarations.
+        if (doc === undefined) {
+            const inlineArgs = m1[DIRECTIVE_INLINE_ARGS] ?? '';
+            switch (m1[DIRECTIVE]) {
+                case 'id': {
+                    // TODO: Add id validation
+                    id = inlineArgs.trim();
+                    continue main;
+                }
+                case 'lang': {
+                    lang = inlineArgs.trim();
+                    continue main;
+                }
+            }
+            doc = new Doc(id, lang, args?.allowAll, args?.allowedAttributes, args?.allowedElements);
+        }
+        switch (m1[DIRECTIVE_KEY] ?? m1[ID_TYPE] ?? m1[ELEMENT] ?? m1[ATTR]) {
+            case '#':
+            case '##': {
                 id1.lastIndex = 0;
-                m2 = id1.exec(m1[0]);
-                if (m2 != null) {
-                    const indent = (m2[1]?.length ?? 0) / 2;
-                    if (element.tag != null || textIndent != null) {
-                        applyIndent(indent);
-                        textIndent = null;
+                const indent = (m1[INDENT].length ?? 0) / 2;
+                if (element.tag != null || textIndent != null) {
+                    applyIndent(indent);
+                    textIndent = null;
+                }
+                fragment.id = m1[ID];
+                if (indent === 0) {
+                    if (m1[FRAGMENT_TYPE] == '[') {
+                        fragment.type = 'range';
+                    }
+                    else if (m1[FRAGMENT_TYPE] === '"') {
+                        fragment.type = 'text';
+                    }
+                    else if (m1[ID_TYPE] === '##') {
+                        fragment.type = 'bare';
+                    }
+                    else {
+                        fragment.type = 'embed';
+                        element.id = fragment.id;
+                    }
+                }
+                else {
+                    element.id = fragment.id;
+                }
+                break;
+            }
+            case '@': {
+                const indent = m1[INDENT].length / 2;
+                if (element.tag != null || textIndent != null) {
+                    applyIndent(indent);
+                }
+                switch (m1[DIRECTIVE]) {
+                    case 'doctype': {
+                        const args = m1[DIRECTIVE_INLINE_ARGS] ?? 'html';
+                        fragment.html += `<!doctype ${args.trim()}>`;
+                        break;
                     }
-                    debug(indent, 'id', m2[2], m2[3], m2[4]);
-                    fragment.id = m2[3];
-                    if (indent === 0) {
-                        if (m2[4] == '[') {
-                            fragment.type = 'range';
+                    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;
+                            }
                         }
-                        else if (m2[4] === '"') {
-                            fragment.type = 'text';
+                        applyIndent(0);
+                        break;
+                    }
+                    case 'mount': {
+                        if (m1[DIRECTIVE_INLINE_ARGS] == null) {
+                            throw new Error('Mount points must have a name');
                         }
-                        else if (m2[2] != null) {
-                            fragment.type = 'bare';
+                        else if (fragment.type !== 'root') {
+                            throw new Error('Mounting is only allowed on a root element');
                         }
-                        else {
-                            fragment.type = 'embed';
-                            element.id = fragment.id;
+                        fragment.mountable = true;
+                        element.mount = m1[DIRECTIVE_INLINE_ARGS].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);
                         }
                     }
-                    break;
                 }
+                break;
             }
-            case '@':
             case '[':
-            // deno-lint-ignore no-fallthrough
             case '::': {
-                element1.lastIndex = 0;
-                // fall through if m1[3] is a # or @
-                m2 = m1[2] ?? m1[4] != null
-                    ? null
-                    : element1.exec(m1[0]);
-                // if null then invalid element selector
-                // allow the default text case to handle
-                if (m2 != null) {
-                    const indent = (m2[1]?.length ?? 0) / 2, tg = m2[2], ar = m2[3], pr = m2[4] === '{' || m2[4] === '{{';
-                    const tx = pr ? null : m2[4];
-                    debug(indent, 'e', tg, pr, tx);
-                    if (element.tag != null ||
+                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.indent = indent;
-                    element.tag = tg;
                     textIndent = null;
                     if (indent === 0 && fragment.id == null) {
                         if (root != null) ;
@@ -233,36 +430,58 @@ function longform(doc, debug = () => { }) {
                             root = fragment;
                         }
                     }
-                    if (ar != null) {
-                        debug(indent, 'a', ar);
-                        while ((m2 = paramsRe.exec(ar))) {
-                            if (m2[1] === '#') {
-                                element.id = m2[2];
+                    const parent = element;
+                    outer.lastIndex = 0;
+                    // Looping through chained element declarations
+                    // foo#x.y::bar::free:: 
+                    while ((m2 = outer.exec(m1[LINE]))) {
+                        let working;
+                        preformattedType = m2[3];
+                        inlineText = m2[4];
+                        if (element.tag === undefined) {
+                            element.tag = m2[1];
+                            working = element;
+                        }
+                        else {
+                            if (parent.chain === undefined)
+                                parent.chain = [];
+                            working = makeElement(indent);
+                            working.tag = m2[1];
+                            parent.chain.push(working);
+                        }
+                        inner.lastIndex = 0;
+                        // Looping through ids, classes and attrs
+                        while ((m3 = inner.exec(m2[2]))) {
+                            if (m3[2] !== undefined) {
+                                working.id = m3[2];
                             }
-                            else if (m2[1] === '.') {
-                                if (element.class == null) {
-                                    element.class = m2[2];
+                            else if (m3[1] !== undefined) {
+                                if (working.class == null) {
+                                    working.class = m3[1];
                                 }
                                 else {
-                                    element.class += ' ' + m2[2];
+                                    working.class += ' ' + m3[1];
                                 }
                             }
                             else {
-                                if (m2[3] === 'id') {
-                                    if (element.id == null) {
-                                        element.id = m2[4];
-                                    }
-                                }
-                                else if (m2[3] === 'class') {
-                                    if (element.class == null) {
-                                        element.class = m2[4];
-                                    }
-                                    else {
-                                        element.class += ' ' + m2[4];
-                                    }
-                                }
-                                else {
-                                    element.attrs[m2[3]] = m2[4];
+                                // TODO: Preserve quoting style around attribute values
+                                let value = m3[4] ?? m3[5] ?? m3[6];
+                                switch (m3[3]) {
+                                    case 'id':
+                                        if (!working.id) {
+                                            working.id = value;
+                                        }
+                                        break;
+                                    case 'class':
+                                        if (!working.class) {
+                                            working.class = value;
+                                        }
+                                        else {
+                                            working.class += ' ' + value;
+                                        }
+                                        break;
+                                    default:
+                                        working.attrs[m3[3]] = value;
                                 }
                             }
                         }
@@ -281,22 +500,21 @@ function longform(doc, debug = () => { }) {
                         applyIndent(indent);
                         break;
                     }
-                    if (!pr && tx != null) {
-                        element.text = tx;
-                    }
-                    else if (pr) {
+                    if (preformattedType !== undefined) {
                         verbatimFirst = true;
                         verbatimIndent = indent;
-                        verbatimSerialize = m2[4] === '{';
+                        verbatimSerialize = preformattedType === '{{';
+                    }
+                    else if (inlineText !== undefined) {
+                        element.text = inlineText;
                     }
                     break;
                 }
                 attribute1.lastIndex = 0;
-                m2 = m1[2] != null
-                    ? null
-                    : attribute1.exec(m1[0]);
+                m2 = m1[ATTR] !== undefined
+                    ? attribute1.exec(m1[LINE])
+                    : undefined;
                 if (m2 != null && element.tag != null) {
-                    debug('a', m2[2], m2[3]);
                     if (m2[2] === 'id') {
                         if (element.id == null) {
                             element.id = m2[3].trim();
@@ -318,64 +536,6 @@ function longform(doc, debug = () => { }) {
                     }
                     break;
                 }
-                directive1.lastIndex = 0;
-                m2 = m1[3] != null
-                    ? null
-                    : directive1.exec(m1[0]);
-                if (m2 != null) {
-                    const indent = (m2[1]?.length ?? 0) / 2;
-                    if (element.tag != null || textIndent != null) {
-                        applyIndent(indent);
-                    }
-                    debug(indent, 'd', m2[2], m2[3]);
-                    switch (m2[2]) {
-                        case 'doctype': {
-                            fragment.html += `<!doctype ${m2[3] ?? 'html'}>`;
-                            break;
-                        }
-                        case 'xml': {
-                            fragment.html += `<?xml ${m2[3] ?? 'version="1.0" encoding="UTF-8"'}?>`;
-                            break;
-                        }
-                        case 'template': {
-                            let indented = false;
-                            fragment.template = indent === 0;
-                            templateLinesRe.lastIndex = sniffTestRe.lastIndex;
-                            while ((m2 = templateLinesRe.exec(doc))) {
-                                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;
-                                }
-                            }
-                            applyIndent(0);
-                            break;
-                        }
-                        case 'mount': {
-                            if (m2[3] == null) {
-                                throw new Error('Mount points must have a name');
-                            }
-                            else if (fragment.type !== 'root') {
-                                throw new Error('Mounting is only allowed on a root element');
-                            }
-                            fragment.mountable = true;
-                            element.mount = m2[3].trim();
-                            break;
-                        }
-                    }
-                    break;
-                }
             }
             default: {
                 m2 = text1.exec(m1[0]);
@@ -384,7 +544,6 @@ function longform(doc, debug = () => { }) {
                 }
                 const indent = m2[1].length / 2;
                 const tx = m2[2].trim();
-                debug(indent, 't', m2[2]);
                 if (element.tag != null) {
                     applyIndent(indent);
                     fragment.html += tx;
@@ -480,6 +639,8 @@ function longform(doc, debug = () => { }) {
             html: fragment.html,
         };
     }
+    output.id = doc?.id;
+    output.lang = doc?.lang;
     return output;
 }
 const templateRe = /(?:#{([\w][\w\-_]*)})|(?:#\[([\w][\w\-_]+)\])/g;