@longform/longform 0.0.5 → 0.0.7

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 { FragmentType, ParsedResult, 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 = /^(\ \ )+/
   , 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
@@ -42,6 +65,7 @@ function makeElement(indent: number = 0): WorkingElement {
     indent,
     html: '',
     attrs: {},
+    chain: undefined,
   };
 }
 
@@ -83,7 +107,6 @@ export function longform(doc: string, debug: (...d: unknown[]) => void = () => {
   output.fragments = Object.create(null);
   output.templates = Object.create(null);
   
-  
   /**
    * Closes any current in progress element definition
    * and creates a new working element.
@@ -105,15 +128,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 +150,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,6 +200,12 @@ 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}>`;
       }
 
@@ -215,88 +272,130 @@ 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 '#': {
+    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(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 (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;
+          }
         }
+
+        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 +403,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,22 +474,22 @@ 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]);
@@ -385,71 +512,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;

package/lib/types.ts

@@ -9,6 +9,7 @@ export type WorkingElement = {
   text?: string;
   html: string;
   mount?: string;
+  chain: WorkingElement[];
 };
 
 export type WorkingFragmentType =
@@ -59,8 +60,8 @@ export type MountPoint = {
 
 export type ParsedResult = {
   mountable?: boolean;
-  root: string | null;
-  selector: string | null;
+  root?: string;
+  selector?: string;
   mountPoints: MountPoint[];
   tail?: string;
   fragments: Record<string, Fragment>;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Matthew Quinn",
   "homepage": "https://github.com/occultist-dev/longform",
   "license": "MIT",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/longform.js",
   "types": "dist/mod.d.ts",
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^12.3.0",
     "@types/commonmark": "^0.27.10",
+    "@types/deno": "^2.5.0",
     "@types/jsdom": "^27.0.0",
     "@types/node": "^24.8.1",
     "commonmark": "^0.31.2",
@@ -54,6 +55,7 @@
   ],
   "scripts": {
     "build": "node build.ts",
+    "bench": "deno bench --no-check --allow-read ./bench/longform.bench.ts",
     "test": "node --test lib/longform.test.ts",
     "serve": "node ./serve.ts"
   }