Merge pull request #157 from AegisJSProject/feature/parser

shgysk8zer0 · web-flow · commit d5f12adbbf83 · 2025-04-08T15:26:47.000-07:00
Add stand-alone `parse()` to parse as a regular function
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.1.6] - 2025-04-08
+
+### Added
+- Add stand-alone `parse()` to parse as a regular function
+
 ## [v0.1.5] - 2025-02-20
 
 ### Fixed
diff --git a/markdown.js b/markdown.js
@@ -37,6 +37,57 @@ export function createStyleSheet(path, { media, base = hljsURL } = {}) {
 	return link;
 }
 
+export function parse(input, {
+	gfm = true,
+	breaks = false,
+	silent = false,
+	langPrefix = 'hljs language-',
+	fallbackLang = 'plaintext',
+	addHeadingIDs = true,
+	idPrefix = null,
+	allowElements,
+	allowAttributes,
+	allowCustomElements,
+	allowUnknownMarkup,
+	allowComments,
+} = {}) {
+	const marked = new Marked(
+		markedHighlight({
+			langPrefix,
+			highlight(code, lang) {
+				const language = hljs.getLanguage(lang) ? lang : fallbackLang;
+				return hljs.highlight(code, { language }).value;
+			}
+		})
+	);
+
+	const frag = document.createDocumentFragment();
+	let raw = input.replaceAll(/\\`/g, '`');
+
+	if (String.dedent instanceof Function && raw.startsWith('\n') && /\n\t*$/.test(raw)) {
+		const tmp = [raw];
+		tmp.raw = [raw];
+		Object.freeze(tmp);
+		raw = String.dedent(tmp);
+	}
+
+	const parsed = marked.parse(raw, { gfm, breaks, silent });
+	const doc = Document.parseHTML(parsed, {
+		allowElements, allowAttributes, allowCustomElements, allowUnknownMarkup,
+		allowComments,
+	});
+
+	frag.append(...doc.body.childNodes);
+
+	if (addHeadingIDs) {
+		frag.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
+			heading.id = typeof idPrefix === 'string' ? `${idPrefix}-${sluggify(heading.textContent)}` : sluggify(heading.textContent);
+		});
+	}
+
+	return frag;
+}
+
 export function createMDParser({
 	gfm = true,
 	breaks = false,
@@ -77,11 +128,14 @@ export function createMDParser({
 			raw = String.dedent(tmp);
 		}
 
-		frag.setHTML(marked.parse(raw, { gfm, breaks, silent }), {
+		const parsed = marked.parse(raw, { gfm, breaks, silent });
+		const doc = Document.parseHTML(parsed, {
 			allowElements, allowAttributes, allowCustomElements, allowUnknownMarkup,
 			allowComments,
 		});
 
+		frag.append(...doc.body.childNodes);
+
 		if (addHeadingIDs) {
 			frag.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
 				heading.id = typeof idPrefix === 'string' ? `${idPrefix}-${sluggify(heading.textContent)}` : sluggify(heading.textContent);
@@ -107,10 +161,10 @@ export async function getMarkdown(url, {
 		headers.set('Accept', 'text/markdown');
 	}
 
-	const resp = await fetch(url, { mode, referrerPolicy, headers, ...rest });
+	const resp = await fetch(url, { mode, referrerPolicy, headers, ...rest }).catch(() => Response.error());
 
 	if (! resp.ok) {
-		throw new DOMException(`${resp.url} [${resp.status} ${resp.statusText}]`, 'NetworkError');
+		throw new DOMException(`${resp.url} [${resp.status}]`, 'NetworkError');
 	} else if (! resp.headers.get('Content-Type').startsWith('text/markdown')) {
 		throw new TypeError(`Invalid Content-Type: ${resp.headers.get('Content-Type')}.`);
 	} else {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/markdown",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Markdown parser for `@aegisjsproject/core`",
   "keywords": [
     "aegis",
diff --git a/test/index.html b/test/index.html
@@ -11,10 +11,13 @@
 		<script type="module" referrerpolicy="no-referrer" src="./test/index.js"></script>
 	</head>
 	<body>
-		<header id="header"></header>
+		<header id="header">
+			<button type="button" class="btn btn-primary" popovertarget="readme-preview" popovertargetaction="show">Show Readme</button>
+			<button type="button" class="btn btn-primary" popovertarget="preview" popovertargetaction="show">Show MD Preview</button>
+		</header>
 		<main>
 			<section id="readme">
-				<md-preview src="../README.md"></md-preview>
+				<md-preview id="readme-preview" src="../README.md" popover="auto"></md-preview>
 			</section>
 			<form name="test">
 				<fieldset>
@@ -30,7 +33,7 @@
 				</div>
 			</form>
 			<section>
-				<md-preview id="preview">
+				<md-preview id="preview" popover="auto">
 					## A Complex Markdown Example
 
 					### Headings
diff --git a/test/index.js b/test/index.js
@@ -1,9 +1,26 @@
-import { md, createStyleSheet, getMarkdown, registerLanguages } from '@aegisjsproject/markdown';
+import { md, createStyleSheet, getMarkdown, registerLanguages, parse } from '@aegisjsproject/markdown';
+import { css } from '@aegisjsproject/core/parsers/css.js';
 import javascript from 'highlight.js/languages/javascript.min.js';
-import css from 'highlight.js/languages/css.min.js';
+import cssLang from 'highlight.js/languages/css.min.js';
 import xml from 'highlight.js/languages/xml.min.js';
 
-registerLanguages({ javascript, css, xml });
+const styles = css`:host {
+	color-scheme: light dark;
+	padding: 0.8rem;
+}
+
+:host(:popover-open) {
+	max-height: 95dvh;
+	width: 80%;
+	border: none;
+}
+
+:host(:popover-open)::backdrop {
+	background-color: rgba(0, 0, 0, 0.7);
+	backdrop-filter: blur(4px);
+}`;
+
+registerLanguages({ javascript, css: cssLang, xml });
 
 document.head.append(
 	createStyleSheet('github', { media: '(prefers-color-scheme: light)' }),
@@ -23,7 +40,7 @@ customElements.define('md-preview', class HTMLMDPreviewElement extends HTMLEleme
 	constructor() {
 		super();
 
-		this.#shadow = this.attachShadow({ mode: 'closed' });
+		this.#shadow = this.attachShadow({ mode: 'open' });
 		const container = document.createElement('div');
 		container.id = 'container';
 		container.part.add('container');
@@ -33,6 +50,8 @@ customElements.define('md-preview', class HTMLMDPreviewElement extends HTMLEleme
 			createStyleSheet('github-dark', { media: '(prefers-color-scheme: dark)' }),
 			container,
 		);
+
+		this.#shadow.adoptedStyleSheets = [styles];
 	}
 
 	connectedCallback() {
@@ -66,7 +85,7 @@ customElements.define('md-preview', class HTMLMDPreviewElement extends HTMLEleme
 
 	set content(val) {
 		if (typeof val === 'string' && val.length !== 0) {
-			this.#shadow.getElementById('container').replaceChildren(md`${val}`);
+			this.#shadow.getElementById('container').replaceChildren(parse(val));
 			this.scrollIntoView({ behavior: 'smooth', block: 'start' });
 		} else {
 			this.#shadow.getElementById('container').replaceChildren();
@@ -98,6 +117,7 @@ document.forms.test.addEventListener('submit', event => {
 	event.preventDefault();
 	const data = new FormData(event.target);
 	document.getElementById('preview').content = data.get('md');
+	document.getElementById('preview').showPopover();
 });
 
 document.forms.test.addEventListener('reset', () => document.getElementById('preview').clear());

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@aegisjsproject/markdown",`
`3`		`- "version": "0.1.5",`
	`3`	`+ "version": "0.1.6",`
`4`	`4`	"description": "Markdown parser for `@aegisjsproject/core`",
`5`	`5`	`"keywords": [`
`6`	`6`	`"aegis",`