it is time

Author: elliott-with-the-longest-name-on-github

apps/docs/src/routes/playground/sveltedown/+page.svelte renamed to apps/docs/src/routes/playground/+page.svelte

@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"build": "pnpm -r build",
-		"dev": "concurrently \"pnpm --filter hast-to-svelte build:watch\" \"pnpm --filter sveltedown build:watch\" \"pnpm --filter docs dev\"",
+		"dev": "concurrently \"pnpm --filter svehast build:watch\" \"pnpm --filter sveltedown build:watch\" \"pnpm --filter docs dev\"",
 		"check": "pnpm -r check",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",

apps/docs/src/routes/playground/append-only/+page.svelte

@@ -1,58 +1,72 @@
-# Svelte library
+# `svehast`
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+A component for rendering [`hast`](https://github.com/syntax-tree/hast) trees. If you're just trying to render markdown, you may be looking for [`sveltedown`](https://npmjs.com/package/sveltedown) instead.
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+## API
 
-## Creating a project
+This package exports a single component: `Hast`. You can use it like this:
 
-If you're seeing this, you've probably already done this step. Congrats!
+```svelte
+<Hast node={/* Root */} />
+```
+
+`node` must be a `Root` node. If you have a different kind of `hast` node, you can turn it into a root node pretty easily: `{ type: 'root', children: [myNode] }`.
 
-```sh
-# create a new project in the current directory
-npx sv create
+It also supports custom renderers. Normally, the easiest way to declare these is as snippets that are direct children of `Hast`:
 
-# create a new project in my-app
-npx sv create my-app
+```svelte
+<Hast node={/* Root */}>
+  {#snippet a({ tagName, props, children, node })}
+    <a {...props} href="/haha-all-links-are-now-the-same">
+      {@render children()}
+    </a>
+  {/snippet}
+</Hast>
 ```
 
-## Developing
+But you can also pass snippets as arguments to the `Hast` component (see [`RendererArg`](#rendererarg) below for argument details):
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+```svelte
+{#snippet a({ tagName, props, children, node })}
+  <a {...props} href="/haha-all-links-are-now-the-same">
+    {@render children()}
+  </a>
+{/snippet}
+
+<Hast node={/* Root */} {a}/>
+```
 
-```sh
-npm run dev
+You can also map nodes to other nodes. For example, if you wanted to only ever render down to a `h3`, you could map headings 4-6 back to `h3`:
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```svelte
+<Hast node={/* Root */} h4="h3" h5="h3" h6="h3">
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+That's pretty much it!
 
-## Building
+## Types
 
-To build your library:
+This package exports a few types that might help you build your own extensions.
 
-```sh
-npm pack
-```
+### `Renderer`
 
-To create a production version of your showcase app:
+The type of a custom renderer. This is either a HTML/SVG tag name (for remapping) or a `Snippet` accepting a `RenderArg` as its only argument.
 
-```sh
-npm run build
-```
+### `RendererArg`
 
-You can preview the production build with `npm run preview`.
+The argument a custom renderer accepts:
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+- `tagName` is the HTML/SVG tag name to render
+- `props` are the props. Typically you should spread these onto the element you're rendering
+- `children` is the snippet you need to render as a child. It will be `undefined` for void elements like `<img>`.
+- `node` is the original and unmodified `hast` node
 
-## Publishing
+A note on `tagName`: This is the name associated with the _resolved_ renderer, not the one we started with. So if we started with a `hast` element with a `tagName` of `h6`, but `h6` had been mapped to `h3`, the tag name passed to your custom renderer would be `h3`. If you need the _original_ tag name, you can find it on the `node` prop, as that remains unchanged.
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+### `Renderers`
 
-To publish your library to [npm](https://www.npmjs.com):
+A map of all HTML/SVG tag names that Svelte can render to their corresponding [`Renderer`](#renderer) definition.
 
-```sh
-npm publish
-```
+### `HTMLElements`
+
+This is `SvelteHTMLElements` without the special `svelte:` elements and with no index signature. Essentially, it's a map of all HTML and SVG tags that Svelte can render to the props that those tag types can have. You probably don't need this.

apps/docs/src/routes/playground/append-only/initial-content.md

@@ -1,5 +1,5 @@
 {
-	"name": "hast-to-svelte",
+	"name": "svehast",
 	"version": "0.0.1",
 	"scripts": {
 		"build": "npm run prepack",
@@ -40,6 +40,7 @@
 		"@types/node": "catalog:",
 		"@vitest/browser": "catalog:",
 		"config": "workspace:*",
+		"hastscript": "catalog:",
 		"playwright": "catalog:",
 		"publint": "catalog:",
 		"svelte": "catalog:",
@@ -55,5 +56,8 @@
 	"dependencies": {
 		"property-information": "catalog:",
 		"style-to-object": "catalog:"
+	},
+	"publishConfig": {
+		"access": "public"
 	}
 }

apps/docs/src/routes/playground/sveltedown/initial-content.md renamed to apps/docs/src/routes/playground/initial-content.md

@@ -1,36 +1,36 @@
 <script lang="ts">
 	import type { Root, RootContent } from 'hast';
-	import type { Renderer, Renderers, SpecificSvelteHTMLElements } from './types.js';
-	import { svg, html } from 'property-information';
+	import type { Renderer, Renderers, HTMLElements } from './types.js';
+	import { svg, html, type Schema } from 'property-information';
 	import { key, reset } from './key.js';
 	import type { Snippet } from 'svelte';
 	import { sveltify_props, sveltify_children } from './ast.js';
 	import { get_renderer } from './renderers.js';
 
-	let { node, renderers }: { node: Root; renderers: Renderers } = $props();
+	let { node, ...renderers }: { node: Root } & Renderers = $props();
 
 	$effect.pre(() => {
 		node;
 		reset();
 	});
 </script>
 
-{#snippet nodes(children: RootContent[])}
+{#snippet nodes(schema: Schema, children: RootContent[])}
 	{#each children as node (key(node))}
 		{#if node.type === 'text'}
 			{node.value}
 		{:else if node.type === 'element'}
-			{@const schema = node.tagName.toLowerCase() === 'svg' ? svg : html}
-			{@const props = sveltify_props(schema, node)}
+			{@const child_schema = node.tagName.toLowerCase() === 'svg' ? svg : schema}
+			{@const props = sveltify_props(child_schema, node)}
 			{@const has_children = node.children.length > 0}
 			{@const [resolved_tag_name, renderer] = get_renderer(
 				node.tagName,
 				renderers,
-				(has_children ? element : void_element) as Renderer<keyof SpecificSvelteHTMLElements>
+				(has_children ? element : void_element) as Renderer<keyof HTMLElements>
 			)}
 
 			{#snippet children()}
-				{@render nodes(sveltify_children(node))}
+				{@render nodes(child_schema, sveltify_children(node))}
 			{/snippet}
 
 			{@render renderer({
@@ -61,4 +61,4 @@
 	</svelte:element>
 {/snippet}
 
-{@render nodes(node.children)}
+{@render nodes(html, node.children)}

package.json

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import Hast from './Hast.svelte';
+import { h } from 'hastscript';
+
+// This test file is minimal because this is pretty thoroughly tested in `sveltedown`.
+// If there are ever any bugs we need to document, we can add more tests here.
+
+describe('Hast', () => {
+	it('should render a simple div', async () => {
+		const { container } = render(Hast, {
+			node: { type: 'root', children: [h('div', 'Hello, world!')] }
+		});
+		await expect.element(container).to_equal_html('<div>Hello, world!</div>');
+	});
+});

packages/hast-to-svelte/README.md

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest';
+import { sveltify_props, sveltify_children } from './ast.js';
+import { h, s } from 'hastscript';
+import { html, svg } from 'property-information';
+
+const WHITESPACE_CASES = [
+	{ display: JSON.stringify(' ').replaceAll('"', ''), actual: ' ' },
+	{ display: JSON.stringify('\t').replaceAll('"', ''), actual: '\t' },
+	{ display: JSON.stringify('\n').replaceAll('"', ''), actual: '\n' },
+	{ display: JSON.stringify('\r').replaceAll('"', ''), actual: '\r' },
+	{ display: JSON.stringify('\f').replaceAll('"', ''), actual: '\f' }
+] as const;
+
+describe('sveltify_props', () => {
+	it('should un-jsx className', () => {
+		// this node has a `className` prop instead of a `class` prop, because
+		// why would you not use JSX prop naming in a HTML
+		const node = h('div.dumb');
+		expect(node).toMatchObject({ properties: { className: ['dumb'] } });
+		expect(sveltify_props(html, node)).toEqual({ class: 'dumb' });
+	});
+
+	it('should un-jsx data attributes', () => {
+		const node = h('div', { 'data-test': 'test' });
+		expect(node).toMatchObject({ properties: { dataTest: 'test' } });
+		expect(sveltify_props(html, node)).toEqual({ 'data-test': 'test' });
+	});
+
+	it('should un-jsx svg attributes', () => {
+		const node = s('svg', { 'stroke-linejoin': '100' });
+		expect(node).toMatchObject({ properties: { strokeLineJoin: '100' } });
+		expect(sveltify_props(svg, node)).toEqual({ 'stroke-linejoin': '100' });
+	});
+
+	describe.each(['td', 'th'])('%s', (tag_name) => {
+		it.each(['center', 'left', 'right', 'justify', 'char'])(
+			'should replace obsolete align in table elements with styles (%s)',
+			(align) => {
+				const node = h(tag_name, { align });
+				expect(node).toMatchObject({ properties: { align } });
+				expect(sveltify_props(html, node)).toEqual({ style: `text-align: ${align}` });
+			}
+		);
+
+		it.each(['center', 'left', 'right', 'justify', 'char'])(
+			'should replace obsolete align in table elements with styles, appending to existing styles (%s)',
+			(align) => {
+				const node = h(tag_name, { align, style: 'color: red;' });
+				expect(node).toMatchObject({ properties: { align, style: 'color: red;' } });
+				expect(sveltify_props(html, node)).toEqual({ style: `color: red; text-align: ${align}` });
+			}
+		);
+	});
+});
+
+describe('sveltify_children', () => {
+	describe.each(['table', 'tbody', 'thead', 'tfoot', 'tr'])('%s', (tag_name) => {
+		it.each(WHITESPACE_CASES)(
+			`should remove whitespace-only text nodes from table elements ($display))`,
+			({ actual: whitespace }) => {
+				const node = h(tag_name, [whitespace, h('div', 'Hello, world!'), whitespace.repeat(10)]);
+				expect(sveltify_children(node)).toEqual([h('div', 'Hello, world!')]);
+			}
+		);
+	});
+
+	describe.each(['div', 'span', 'p', 'h1'])('%s', (tag_name) => {
+		it.each(WHITESPACE_CASES)(
+			'should preserve whitespace-only text nodes from table elements ($display))',
+			({ actual: whitespace }) => {
+				const node = h(tag_name, [whitespace, h('div', 'Hello, world!'), whitespace.repeat(10)]);
+				expect(sveltify_children(node)).toEqual(
+					h(tag_name, [whitespace, h('div', 'Hello, world!'), whitespace.repeat(10)]).children
+				);
+			}
+		);
+	});
+});