@longform/longform 0.0.6 → 0.0.8

package/lib/longform.ts

@@ -1,17 +1,40 @@
-import type { FragmentType, ParsedResult, WorkingElement, WorkingFragment, Fragment } from "./types.ts";
-
-const sniffTestRe = /^(?:(?:(--).*)|(?: *(@|#).*)|(?: *[\w\-]+(?::[\w\-]+)?(?:[#.[][^\n]+)?(::).*)|(?:  +([\["]).*)|(\ \ .*))$/gmi
-  , element1 = /((?:\ \ )+)? ?([\w\-]+(?::[\w\-]+)?)([#\.\[][^\n]*)?::(?: ({{?|[^\n]+))?/gmi
-  , directive1 = /((?:\ \ )+)? ?@([\w][\w\-]+)(?::: ?([^\n]+)?)?/gmi
+import type { AppliedDirective, DirectiveDef, FragmentType, LongformArgs, ParsedResult, SerializationElement, SerializerConfig, SimplifiedElement, WorkingElement, WorkingFragment } from "./types.ts";
+
+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
-  , idnt1 = /^(\ \ )+/
+  , identRe = /^(\ \ )+/
   , text1 = /^((?:\ \ )+)([^ \n][^\n]*)$/i
-  , paramsRe = /(?:(#|\.)([^#.\[\n]+)|(?:\[(\w[\w\-]*(?::\w[\w\-]*)?)(?:=([^\n\]]+))?\]))/g
   , 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: RegExpExecArray | null
@@ -40,8 +63,17 @@ function escape(value: string): string {
 function makeElement(indent: number = 0): WorkingElement {
   return {
     indent,
-    html: '',
+    key: undefined,
+    id: undefined,
+    tag: undefined,
+    class: undefined,
+    text: undefined,
     attrs: {},
+    html: '',
+    mount: undefined,
+    serializerConfig: undefined,
+    chain: undefined,
+    beforeRender: undefined,
   };
 }
 
@@ -57,14 +89,70 @@ function makeFragment(type: FragmentType = 'bare'): WorkingFragment {
   };
 }
 
+class Doc {
+  id?: string = undefined;
+  lang?: string = undefined;
+  meta: Record<string, unknown> = {};
+  #serializerConfig: SerializerConfig;
+
+  constructor(
+    id?: string | undefined,
+    lang?: string | undefined,
+    allowAll?: boolean | undefined,
+    allowedAttributes?: string[] | undefined,
+    allowedElements?: Array<string | SerializationElement>,
+  ) {
+    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.
  */
-export function longform(doc: string, debug: (...d: unknown[]) => void = () => {}): ParsedResult {
+export function longform(
+  input: string,
+  args?: LongformArgs,
+): ParsedResult {
   let skipping: boolean = false
     , textIndent: number | null = null
     , verbatimSerialize: boolean = true
@@ -74,21 +162,68 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
     , fragment: WorkingFragment = makeFragment()
     // the root fragment
     , root: WorkingFragment | null = null
+    , id: string | undefined
+    , lang: string | undefined
+    , doc: Doc | undefined
     // ids of claimed fragments
   const claimed: Set<string> = new Set()
     // parsed fragments
     , parsed: Map<string, WorkingFragment> = new Map()
-    , output: ParsedResult = Object.create(null);
+    , output: ParsedResult = Object.create(null)
+    , directives: Record<string, DirectiveDef> = {}
+
 
   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: number) {
+    if (Array.isArray(element.beforeRender)) {
+      const el: SimplifiedElement = {
+        id: element.id,
+        tag: element.tag,
+        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,
+          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
@@ -105,15 +240,15 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
         }
       }
 
-      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 + '"';
       }
 
@@ -127,6 +262,34 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
 
       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;
       }
@@ -149,11 +312,16 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
       ) {
         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;
         } else if (fragment.type === 'root') {
@@ -169,7 +337,7 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
     }
   }
 
-  while ((m1 = sniffTestRe.exec(doc))) {
+  main: while ((m1 = sniffTestRe.exec(input))) {
     if (m1[1] === '--') {
       continue;
     } else if (fragment.template) {
@@ -182,15 +350,14 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
     // 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 as number <= verbatimIndent) {
         fragment.html += '\n';
-        debug(indent, '}', m2?.[0]);
 
         applyIndent(indent);
         verbatimIndent = null;
@@ -202,7 +369,6 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
         }
       } else {
         const line = m1[0].replace('  '.repeat(verbatimIndent + 1), '');
-        debug(indent, '{', line);
 
         if (element.tag != null) {
           applyIndent(indent as number);
@@ -215,88 +381,171 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
         }
         
         if (verbatimSerialize) {
-          fragment.html += escape(line);
-        } else {
           fragment.html += line;
+        } else {
+          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;
+        const indent = (m1[INDENT].length ?? 0) / 2;
 
-          if (element.tag != null || textIndent != null) {
-            applyIndent(indent);
-            textIndent = null;
+        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;
+        }
 
-          debug(indent, 'id', m2[2], m2[3], m2[4]);
+        break;
+      }
+      case '@': {
+        const indent = m1[INDENT].length / 2;
 
-          fragment.id = m2[3];
+        if (element.tag != null || textIndent != null) {
+          applyIndent(indent);
+        }
 
-          if (indent === 0) {
-            if (m2[4] == '[') {
-              fragment.type = 'range';
-            } else if (m2[4] === '"') {
-              fragment.type = 'text';
-            } else if (m2[2] != null) {
-              fragment.type = 'bare';
-            } else {
-              fragment.type = 'embed';
-              element.id = fragment.id;
+        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;
+              }
             }
+
+            applyIndent(0);
+            break;
           }
+          case 'mount': {
+            if (m1[DIRECTIVE_INLINE_ARGS] == 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');
+            }
 
-          break;
+            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: AppliedDirective = {
+                ...def,
+                inlineArg: m1[DIRECTIVE_INLINE_ARGS],
+              };
+
+              element.beforeRender.push(applied);
+            }
+          }
         }
+
+        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 (m1[ELEMENT] !== undefined) {
+          const indent = (m1[INDENT]?.length ?? 0) / 2;
+          let preformattedType: string | undefined;
+          let inlineText: string | undefined;
 
           if (
-            element.tag != null ||
+            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) {
+              // skip if root is found and this fragment
+              // has no id
               skipping = true;
             } else {
               fragment.type = 'root';
@@ -304,30 +553,58 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
             }
           }
           
-          if (ar != null) {
-            debug(indent, 'a', ar);
-            while ((m2 = paramsRe.exec(ar))) {
-              if (m2[1] === '#') {
-                element.id = m2[2];
-              } else if (m2[1] === '.') {
-                if (element.class == null) {
-                  element.class = 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: WorkingElement;
+
+            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 (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;
                 }
               }
             }
@@ -347,26 +624,24 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
             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();
@@ -385,71 +660,6 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
 
           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]) as RegExpExecArray;
@@ -460,8 +670,6 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
         const indent = m2[1].length / 2;
         const tx = m2[2].trim();
 
-        debug(indent, 't', m2[2]);
-
         if (element.tag != null) {
           applyIndent(indent);
 
@@ -575,6 +783,9 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
     };
   }
 
+  output.id = doc?.id;
+  output.lang = doc?.lang;
+
   return output;
 }