@longform/longform 0.0.6 → 0.0.8

package/lib/types.ts

@@ -1,4 +1,16 @@
 
+
+export type SerializationElement = {
+  tag: string;
+  attrs: string[];
+};
+
+export type SerializerConfig = {
+  allowAll: boolean;
+  allowedAttributes: string[];
+  allowedElements: Record<string, SerializationElement>;
+};
+
 export type WorkingElement = {
   indent: number;
   key?: string;
@@ -9,6 +21,9 @@ export type WorkingElement = {
   text?: string;
   html: string;
   mount?: string;
+  serializerConfig?: SerializerConfig;
+  chain: WorkingElement[];
+  beforeRender?: AppliedDirective[];
 };
 
 export type WorkingFragmentType =
@@ -42,7 +57,7 @@ export type WorkingFragment = {
   html: string;
   refs: FragmentRef[];
   els: WorkingElement[];
-  mountPoints: MountPoint[];
+  mountPoints?: MountPoint[];
 };
 
 export type Fragment = {
@@ -58,6 +73,8 @@ export type MountPoint = {
 };
 
 export type ParsedResult = {
+  id?: string;
+  lang?: string;
   mountable?: boolean;
   root?: string;
   selector?: string;
@@ -67,3 +84,77 @@ export type ParsedResult = {
   templates: Record<string, string>;
 };
 
+export type Doc = {
+  id?: string;
+  lang?: string;
+  meta: Readonly<Record<string, unknown>>;
+  serializerConfig?: SerializerConfig;
+  allowAll(): void;
+  allowAttributes(attributes: string[]): void;
+  allowElements(elements: Record<string,  SerializationElement>): void;
+};
+
+export type SimplifiedElement = {
+  id?: string;
+  tag: string;
+  class?: string;
+  attrs: Record<string, string | boolean | null>;
+};
+
+export type GlobalCtx = {
+  doc: Doc;
+};
+
+export type BeforeRenderCtx = {
+  inlineArg?: string;
+  blockArg?: string;
+  el: SimplifiedElement;
+  chain: SimplifiedElement[];
+  doc: Readonly<Doc>;
+  //serializerConfig?: SerializerConfig;
+  //setMeta(key: string, value: unknown): void;
+  //allowAll(): void;
+  //allowAttributes(attributes: string[]): void;
+  //allowElements(elements: Record<string,  SerializationElement>): void;
+};
+
+export type AttrValueCtx = {
+  tag: string;
+  doc: Readonly<Doc>;
+  meta: Readonly<Record<string, string>>
+};
+
+export type AppliesTo =
+  | 'self'
+  | 'direct-descendants'
+  | 'children'
+  | 'all'
+;
+
+export type DirectiveDef = {
+  onGlobal?: (ctx: GlobalCtx) => void;
+  beforeFragment?: () => void;
+  beforeElement?: () => void;
+  beforeRender?: (ctx: BeforeRenderCtx) => void;
+  render?: (inlineArgs?: string, blockArgs?: string) => string;
+  renderAttr?: (ctx: AttrValueCtx) => string;
+};
+
+export type AppliedDirective = {
+  inlineArg?: string;
+  blockArg?: string;
+  onGlobal?: (ctx: GlobalCtx) => void;
+  beforeFragment?: () => void;
+  beforeElement?: () => void;
+  beforeRender?: (ctx: BeforeRenderCtx) => void;
+  render?: (inlineArgs?: string, blockArgs?: string) => string;
+  renderAttr?: (ctx: AttrValueCtx) => string;
+}
+
+export type LongformArgs = {
+  key?: string;
+  allowAll?: boolean;
+  allowedAttributes?: string[];
+  allowedElements?: Array<string | SerializationElement>;
+  directives?: Record<string, DirectiveDef>;
+};

package/package.json

@@ -4,10 +4,23 @@
   "author": "Matthew Quinn",
   "homepage": "https://github.com/occultist-dev/longform",
   "license": "MIT",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
-  "main": "dist/longform.js",
+  "keywords": [
+    "HTML",
+    "Fragments",
+    "Templating",
+    "Longform"
+  ],
+  "main": "./dist/longform.js",
   "types": "dist/mod.d.ts",
+  "exports": {
+    ".": {
+      "node": "./lib/longform.ts",
+      "import": "./dist/longform.js",
+      "require": "./dist/longform.cjs"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/occultist-dev/longform"
@@ -24,26 +37,21 @@
       "url": "https://github.com/occultist-dev/longform/blob/main/LICENSE"
     }
   ],
-  "keywords": [
-    "HTML",
-    "Fragments",
-    "Templating",
-    "Longform"
-  ],
   "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",
-    "dompurify": "^3.3.0",
+    "dompurify": "^3.4.1",
     "jsdom": "^27.0.1",
     "marked": "^16.4.1",
     "prettier": "^3.6.2",
-    "rollup": "^4.53.3",
+    "rollup": "^4.60.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vnu-jar": "^24.10.17"
+    "vnu-jar": "^26.4.16"
   },
   "files": [
     "package.json",
@@ -54,7 +62,8 @@
   ],
   "scripts": {
     "build": "node build.ts",
-    "test": "node --test lib/longform.test.ts",
+    "bench": "deno bench --no-check --allow-read ./bench/longform.bench.ts",
+    "test": "node --test test/**/*.test.ts",
     "serve": "node ./serve.ts"
   }
 }

package/lib/longform.test.ts

@@ -1,347 +0,0 @@
-import { longform, processTemplate } from './longform.ts';
-import type { ParsedResult } from './types.ts';
-import test from 'node:test';
-import assert from 'node:assert/strict';
-import vnu from 'vnu-jar';
-import { execFile } from "node:child_process";
-import { tmpdir } from "node:os";
-import { parse, resolve } from "node:path";
-import { randomUUID } from "node:crypto";
-import { writeFile, unlink } from "node:fs/promises";
-import * as prettier from 'prettier';
-import {execPath} from 'node:process';
-
-async function validate(html: string, type: 'html' | 'xml' = 'html'): Promise<boolean> {
-  return true;
-  
-  const tmpfile = resolve(tmpdir(), randomUUID() + '.html');
-  const format = type === 'xml'
-    ? '--xml'
-    : '--html';
-
-  await writeFile(tmpfile, html, 'utf-8');
-
-  return new Promise<boolean>((resolve, reject) => {
-    execFile('java', [
-      '-jar',
-      `"${vnu}"`,
-      format,
-      '--text',
-      'json',
-      tmpfile,
-    ], { shell: true }, async (err) => {
-      await unlink(tmpfile);
-
-      if (err) {
-        console.log(`HTML Validation error: ${err}`);
-        console.log(await prettier.format(html, { parser: 'html' }));
-        return reject(false);
-      }
-
-      resolve(true);
-    });
-  });
-}
-
-function wrapHead(html: string): string {
-  return `<!doctype html><html lang=en><head>${html}</head><body><h1>Test</h1></body></html>`;
-}
-
-function wrapBody(html: string): string {
-  return `<!doctype html><html lang=en><head><title>Test</title></head><body>${html}</body></html>`;
-}
-
-const lf1 = `
-#ignored-in-test
-p:: Ignore me.
-
-@doctype:: html
-html[lang=en]::
-  head::
-    title:: Longform title
-  body::
-    h1:: Longform h1
-`;
-
-const html1 = `\
-<!doctype html>\
-<html lang="en"><head><title>Longform title</title></head>\
-<body><h1>Longform h1</h1></body></html>`;
-
-test('It creates a root element with doctype', async () => {
-  const res = longform(lf1);
-  const html = res.root as string;
-
-  assert(await validate(html));
-  assert.equal(html, html1);
-});
-
-const lf2 = `\
-#page-info
-div.card.card--info::
-  h4.card-header:: 
-    The card's title goes here
-  p.card-description::
-    This is the body of the card. You
-    can use&nbsp;<b>html</b> to inline
-    elements which are hard to use in longform
-    syntax, <strong>but they have to be allowed 
-    using longform directives</strong>.
-`;
-
-const html2 = `\
-<div id="page-info" class="card card--info"><h4 class="card-header">The card's \
-title goes here</h4><p class="card-description">\
-This is the body of the card. You can use&nbsp;<b>html</b> \
-to inline elements which are hard to use in \
-longform syntax, <strong>but they have to be \
-allowed using longform directives</strong>.</p>\
-</div>`;
-test('It creates an ided element with inline html copy', async () => {
-  const res = longform(lf2);
-  const html = res.fragments['page-info'].html;
-
-  assert(await validate(wrapBody(html)));
-  assert.equal(html, html2);
-});
-
-const lf3 = `
-#head [
-  title:: My Longform Test
-  meta::
-    [name=description]
-    [content=This tests the validity and correctness of the longform output]
-]
-`;
-const html3 = `\
-<title>My Longform Test</title>\
-<meta name="description" content="This tests the validity and correctness of the longform output">\
-`;
-test('It creates a range of elements', async () => {
-  const res = longform(lf3);
-  const html = res.fragments['head'].html as string;
-
-  assert.equal(html, html3);
-});
-
-const lf4 = `
-@xml:: version="1.0" encoding="UTF-8"
-h:html::
-  [xmlns:xdc=http://www.xml.com/books]
-  [xmlns:h=http://www.w3.org/HTML/1998/html4]
-  h:head::
-    h:title:: Book Review
-  h:body::
-    xdc:bookreview::
-      xdc:title:: XML: A Primer
-      h:table::
-        h:tr[align=center]::
-          h:td:: Author
-          h:td:: Price
-          h:td:: Pages
-          h:td:: Date
-        h:tr[align=left]::
-          h:td::
-            xdc:author:: Simon St. Laurent
-          h:td::
-            xdc:price:: 31.98
-          h:td::
-            xdc:pages:: 352
-          h:td::
-            xdc:date:: 1998/01
-`;
-
-const xml4 = `\
-<?xml version="1.0" encoding="UTF-8"?>\
-<h:html xmlns:xdc="http://www.xml.com/books" xmlns:h="http://www.w3.org/HTML/1998/html4">\
-<h:head><h:title>Book Review</h:title></h:head>\
-<h:body>\
-<xdc:bookreview>\
-<xdc:title>XML: A Primer</xdc:title>\
-<h:table>\
-<h:tr align="center">\
-<h:td>Author</h:td><h:td>Price</h:td>\
-<h:td>Pages</h:td><h:td>Date</h:td></h:tr>\
-<h:tr align="left">\
-<h:td><xdc:author>Simon St. Laurent</xdc:author></h:td>\
-<h:td><xdc:price>31.98</xdc:price></h:td>\
-<h:td><xdc:pages>352</xdc:pages></h:td>\
-<h:td><xdc:date>1998/01</xdc:date></h:td>\
-</h:tr>\
-</h:table>\
-</xdc:bookreview>\
-</h:body>\
-</h:html>\
-`;
-test('It parses an XML string', () => {
-  const res = longform(lf4);
-  const xml = res.root as string;
-
-  assert.equal(xml, xml4);
-})
-
-const lf5 = `
-pre::
-  code:: {
-    div::
-      Example longform
-      <em>with preformatted html</em>
-  }
-`;
-const html5 = `<pre><code>div::
-  Example longform
-  &lt;em&gt;with preformatted html&lt;/em&gt;
-</code></pre>`;
-test('It parses preformatted content', () => {
-  const res = longform(lf5);
-  const html = res.root as string;
-
-  assert.equal(html, html5);
-})
-
-const lf6 = `
-head::
-  script:: {{
-    const foo = 'bar';
-
-    console.log(foo);
-  }}
-`;
-const html6 = `\
-<head><script>const foo = 'bar';
-console.log(foo);
-</script></head>\
-`;
-test('It parses preformatted content', () => {
-  const res = longform(lf6);
-  const html = res.root as string;
-
-  assert.equal(html, html6);
-})
-
-const lf7 = `
-#meta [
-  title:: Ref test
-  meta::
-    [name=description]
-    [content=Tests referencing other frags]
-]
-
-#footer::
-footer::
-  This is the footer
-
-@doctype:: html
-html[lang=en]::
-  head::
-    #[meta]
-  body::
-    Test #[header]
-    #[main]
-    #[footer]
-
-#header
-header::
-  hgroup::
-    h1:: Ref test
-    p:: Tests referenceing other frags
-
-#p2
-p::
-  The second p tag.
-
-#main
-main::
-  #[p1]
-  #[p2]
-
-#p1
-p::
-  The first p tag.
-`;
-
-test('It embeds referenced fragments', { skip: true }, async () => {
-  const res = longform(lf7);
-});
-
-const lf8 = `
-@root
-html::
-  This is ignored
-
-@template
-#label "
-  This is my #{position} label text #[ref]
-  with a new line in it
-"
-
-##ref
-p::
-  This is referenced.
-"
-`;
-
-test('It renders plan text fragments', { skip: true }, () => {
-  const parsed = longform(lf8);
-  const res = processTemplate('label', { position: 4 }, parsed);
-})
-
-const lf9 = `
-@template
-#my-template
-div[aria-label=Something something #{position}]::
-  Hello world!
-
-#other-fragment
-div::
-  p:: Test
-`;
-const html9 = `\
-<div id="other-fragment"><p>Test</p></div>\
-`;
-const template9 = `\
-<div id="my-template" aria-label="Something something 4">Hello world!</div>\
-`;
-test('It renders templated element fragments', { only: true }, () => {
-  const parsed = longform(lf9);
-  console.log(parsed)
-  const res = processTemplate(parsed.templates['my-template'], { position: 4 }, x => {
-    return parsed.fragments[x]?.html;
-  });
-
-  assert.equal(parsed.fragments['other-fragment'].html, html9);
-  assert.equal(res, template9);
-});
-
-const lf10 = `
-@root
-@doctype:: html
-html::
-  @mount:: head
-  head::
-  body::
-    @mount:: header
-    header.header::
-    @mount:: main
-    main::
-    @mount:: footer
-`;
-test('It breaks mount points up into individual dom slices', () => {
-  const parsed = longform(lf10, console.log);
-
-  console.log(parsed);
-
-  assert(parsed.mountable);
-  assert.equal(parsed.mountPoints[0].id, 'head');
-  assert.equal(parsed.mountPoints[0].part, '<!doctype html><html><head data-lf-mount="head">');
-  assert.equal(parsed.mountPoints[1].id, 'header');
-  assert.equal(parsed.mountPoints[1].part, '</head><body><header data-lf-mount="header" class="header">');
-  assert.equal(parsed.mountPoints[2].id, 'main');
-  assert.equal(parsed.mountPoints[2].part, '</header><main data-lf-mount="main">');
-  assert.equal(parsed.tail, '</main></body></html>');
-});
-
-
-
-
-