@longform/longform 0.0.22 → 0.0.24

package/lib/longform.ts

@@ -189,15 +189,15 @@ export async function longform(
     }
     , promises: Array<Promise<void>> = []
 
-  let key: string = args?.key as string;
+  let key: string | undefined = args?.key;
   
-  if (!args?.predictable && key == null) {
+  if (key == null && args?.annotations === 'obscure') {
     const arr = new Uint8Array(10);
 
     crypto.getRandomValues(arr)
 
     key = arr.toHex().toLowerCase();
-  } else if (key == null) {
+  } else if (key == null && args?.annotations === 'predictable') {
     key = 'lf';
   }
 
@@ -207,7 +207,11 @@ export async function longform(
   if (args?.directives != null) {
     const entries = Object.entries(args.directives);
 
-    for (let i = 0, l = entries.length, e = entries[i]; i < l; i++) {
+    let e: [string, DirectiveDef];
+    
+    for (let i = 0, l = entries.length; i < l; i++) {
+      e = entries[i];
+
       if (!directiveValidator.test(e[0])) {
         console.warn(`Invalid custom directive name '$e{[0]}'`);
 
@@ -306,7 +310,7 @@ export async function longform(
                   doc,
                   inlineArgs: directive.inlineArgs,
                   blockArgs: verbatimText,
-                }) + ' ';
+                }) ?? '' + ' ';
               } catch (err) {
                 console.error(`Error in calling directive ${directive.name}`)
                 console.error(err)
@@ -451,99 +455,33 @@ export async function longform(
         }
 
         break;
-      case '@':
-        if (element.tag !== undefined) {
+      case '::':
+        if (
+          element.tag !== undefined ||
+          element.indent > indent
+        ) {
           [element, fragment] = applyIndent(indent, key, element, fragment, doc, parsed, output, args);
         }
 
-        const inlineArgs = m1[DIRECTIVE_INLINE_ARGS] ?? ''
-
-        switch (m1[DIRECTIVE]) {
-          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);
-            }
-
-            continue main;
-          case 'doctype':
-            fragment.html += `<!doctype ${(inlineArgs.trim() || 'html').trim()}>`;
-            break;
-          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') {
-              console.warn('Mounting is only allowed on a root element');
-            }
-
-            fragment.mountable = true;
-            element.mount = inlineArgs.trim();
-            break;
+        element.indent = indent;
+        
+        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';
+            root = fragment;
+          }
         }
-
-        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 '::':
-        if (m1[ELEMENT] !== undefined) {
+        // output mode templates parses fragments as though
+        // they were templates, including the root fragment
+        if (args?.outputMode !== 'templates') {
           let preformattedType: string | undefined;
           let inlineText: string | undefined;
 
-          if (
-            element.tag !== undefined ||
-            element.indent > indent
-          ) {
-            [element, fragment] = applyIndent(indent, key, element, fragment, doc, parsed, output, args);
-          }
-
-          element.indent = indent;
-          
-          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';
-              root = fragment;
-            }
-          }
-          
           const parent = element;
           outerRe.lastIndex = 0;
 
@@ -650,6 +588,79 @@ export async function longform(
 
           break;
         }
+
+        // handle as directive if output mode is templates
+        // the templateLinesRe directive will need to re-process this
+        // line so we rewind the sniffTestRe last index for it to copy
+        sniffTestRe.lastIndex = sniffTestRe.lastIndex - m1[0].length;
+      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] ?? 'template') {
+          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);
+            }
+
+            continue main;
+          case 'doctype':
+            fragment.html += `<!doctype ${(inlineArgs.trim() || 'html').trim()}>`;
+            break;
+          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') {
+              console.warn('Mounting is only allowed on a root element');
+            }
+
+            fragment.mountable = true;
+            element.mount = inlineArgs.trim();
+            break;
+        }
+
+        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 '[':
         // TODO: Add attr directive support.
         attributeRe.lastIndex = 0;
@@ -719,13 +730,18 @@ export async function longform(
   }
   
   if (root?.html != null) {
-    output.root = root.html;
-    output.selector = `[data-${key}-root]`;
+    if (root.template) {
+      output.template = root.html; 
+    } else {
+      output.root = root.html;
+
+      if (key != null) output.selector = `[data-${key}-root]`;
+    }
   }
 
   let f: WorkingFragment;
   for (let i = 0, l = arr.length, f = arr[i]; i < l; i++) {
-    let selector!: string;
+    let selector: string = undefined as unknown as string;
 
     f = arr[i];
 
@@ -734,14 +750,16 @@ export async function longform(
       continue;
     }
 
-    switch (f.type) {
-      case 'embed':
-        if (args?.predictable) {
-          selector = `[id=${f.id}]`;
-          break;
-        }
-      case 'bare':
-      case 'range': selector = `[data-${key}=${f.id}]`;
+    if (key != null) {
+      switch (f.type) {
+        case 'embed':
+          if (args?.annotations === 'obscure') {
+            selector = `[id=${f.id}]`;
+            break;
+          }
+        case 'bare':
+        case 'range': selector = `[data-${key}=${f.id}]`;
+      }
     }
 
     output.fragments[f.id as string] = {
@@ -752,7 +770,7 @@ export async function longform(
     };
   }
 
-  output.key = key;
+  output.key = key as string;
   output.id = id;
   output.lang = lang;
   output.dir = dir;
@@ -796,7 +814,7 @@ export async function processTemplate(
  */
 function applyIndent(
   targetIndent: number,
-  key: string,
+  key: string | undefined,
   element: WorkingElement,
   fragment: WorkingFragment,
   doc: Doc,
@@ -858,18 +876,20 @@ function applyIndent(
       }
     }
 
-    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 (key != null) {
+      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?.annotations === 'obscure') {
+          fragment.html += ` data-${key}="${fragment.id}"`;
+        }
       }
-    }
 
-    if (element.mount !== undefined) {
-      fragment.html += ` data-${key}-mount="${element.mount}"`;
+      if (element.mount !== undefined) {
+        fragment.html += ` data-${key}-mount="${element.mount}"`;
+      }
     }
 
     fragment.html += '>';
@@ -934,10 +954,12 @@ function applyIndent(
     }
 
     if (targetIndent === 0) {
-      if (fragment.template) {
-        output.templates[fragment.id] = fragment.html;
-      } else if (fragment.type !== 'root') {
-        parsed.set(fragment.id, fragment);
+      if (fragment.type !== 'root') {
+        if (fragment.template) {
+          output.templates[fragment.id] = fragment.html;
+        } else {
+          parsed.set(fragment.id, fragment);
+        }
       }
 
       fragment = makeFragment();

package/lib/types.ts

@@ -151,10 +151,16 @@ export type AppliedDirective = {
   element?: (ctx: ElementCtx) => void;
 }
 
+export type Annotation =
+  | 'predictable'
+  | 'obscure'
+;
+
 export type OutputMode =
   | 'doc'
   | 'head'
   | 'mountable'
+  | 'templates'
 ;
 
 export type LongformArgs = {
@@ -165,14 +171,6 @@ export type LongformArgs = {
    */
   key?: string;
 
-  /**
-   * If true the parser will default to using the 'lf' key for data attributes
-   * and fragments with embedded ids will not used data attributes for selectors.
-   *
-   * This is less safe in environments where Longform is used for SSR.
-   */
-  predictable?: boolean;
-
   /**
    * The id of the document. If set the @id is ignored.
    * This can be used when creating partial re-usable documents.
@@ -204,6 +202,11 @@ export type LongformArgs = {
    */
   meta?: Record<string, unknown>;
 
+  /**
+   * Style in which data attributes are added to output HTML markup.
+   */
+  annotations?: Annotation;
+  
   /**
    * The output mode of the document.
    */
@@ -226,6 +229,7 @@ export type ParsedResult = {
   data: Record<string, unknown>;
   mountable?: boolean;
   root?: string;
+  template?: string;
   selector?: string;
   mountPoints: MountPoint[];
   tail?: string;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Matthew Quinn",
   "homepage": "https://github.com/occultist-dev/longform",
   "license": "MIT",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "keywords": [
     "HTML",