@prosary/vue 0.0.0-stage → 0.0.0

package/.dist/index.d.mts

@@ -0,0 +1,51 @@
+import { Component, PropType, VNodeChild } from "vue";
+import { Root } from "hast";
+/**
+ * The property of an element built from a directive that names the
+ * directive, as the kit's `content.marker` names it: `data-directive` in
+ * HTML.
+ */
+export declare const MARKER = "dataDirective";
+/**
+ * What renders in place of an element: by tag name (`h2`, `a`) or, for an
+ * element built from a directive, by the directive's name (`callout`). A
+ * directive's name wins over its tag. The component receives the element's
+ * attributes as props — a directive's own attributes by the names they were
+ * written with — and its children in the default slot.
+ */
+export type Components = Record<string, Component>;
+/**
+ * Renders a content document: the HTML tree the kit built, as vnodes in
+ * place. `components` names what renders instead of an element, by tag or
+ * by directive.
+ */
+export declare const ProsaryDocument: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  tree: {
+    type: PropType<Root>;
+    required: true;
+  };
+  components: {
+    type: PropType<Components>;
+    default: () => {};
+  };
+}>, () => import("vue").VNodeChild[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  tree: {
+    type: PropType<Root>;
+    required: true;
+  };
+  components: {
+    type: PropType<Components>;
+    default: () => {};
+  };
+}>> & Readonly<{}>, {
+  components: Components;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Renders an HTML tree to vnodes: each element as its tag, or as the
+ * component that overrides it, each text node as text. Comments and
+ * doctypes render nothing.
+ *
+ * @param tree - The HTML tree, as the kit builds it.
+ * @param components - What renders in place of elements, by tag or directive.
+ */
+export declare const render: (tree: Root, components?: Components) => VNodeChild[];

package/.dist/index.mjs

@@ -0,0 +1,69 @@
+import { defineComponent, h } from "vue";
+import { find, html } from "property-information";
+const MARKER = "dataDirective";
+const written = (property) => {
+	const name = property.replace(/^data(?=[A-Z])/, "");
+	return name === property ? property : name.charAt(0).toLowerCase() + name.slice(1);
+};
+const value = (property, given) => {
+	if (!Array.isArray(given)) return given;
+	return given.join(find(html, property).commaSeparated ? ", " : " ");
+};
+const props = (properties, directive) => {
+	const result = {};
+	for (const [property, given] of Object.entries(properties)) {
+		if (given === void 0 || given === null) continue;
+		if (property === "dataDirective" && directive !== void 0) continue;
+		const name = directive === void 0 ? find(html, property).attribute : written(property);
+		result[name] = value(property, given);
+	}
+	return result;
+};
+const resolve = (element, components) => {
+	const marker = element.properties[MARKER];
+	const directive = typeof marker === "string" ? marker : void 0;
+	if (directive !== void 0 && components[directive] !== void 0) return {
+		type: components[directive],
+		directive
+	};
+	return {
+		type: components[element.tagName] ?? element.tagName,
+		directive: void 0
+	};
+};
+const nodes = (contents, components) => {
+	return contents.flatMap((content) => {
+		const child = node(content, components);
+		return child === null ? [] : [child];
+	});
+};
+const node = (content, components) => {
+	switch (content.type) {
+		case "text": return content.value;
+		case "element": {
+			const { type, directive } = resolve(content, components);
+			const children = nodes(content.children, components);
+			if (typeof type === "string") return h(type, props(content.properties, void 0), children);
+			return h(type, props(content.properties, directive), { default: () => children });
+		}
+		default: return null;
+	}
+};
+const render = (tree, components = {}) => {
+	return nodes(tree.children, components);
+};
+const ProsaryDocument = defineComponent({
+	name: "ProsaryDocument",
+	props: {
+		tree: {
+			type: Object,
+			required: true
+		},
+		components: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	setup: (props) => () => render(props.tree, props.components)
+});
+export { MARKER, ProsaryDocument, render };

package/README.md

@@ -1,3 +1,49 @@
-# Temporary Holding Version
+# @prosary/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Renders prosary content in Vue: the HTML tree `@prosary/kit` builds a
+document to, as vnodes, with components in place of the elements you choose.
+
+## Install
+
+```sh
+pnpm add @prosary/vue
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ProsaryDocument } from "@prosary/vue";
+import Callout from "./Callout.vue";
+import Heading from "./Heading.vue";
+</script>
+
+<template>
+  <ProsaryDocument
+    :tree="tree"
+    :components="{ h2: Heading, callout: Callout }"
+  />
+</template>
+```
+
+Each element renders as its tag, with its attributes. Each text node renders
+as text. Comments render nothing.
+
+## Components
+
+`components` names what renders in place of an element, by tag name or, for
+an element built from a directive, by the directive's name. A directive's
+name wins over its tag.
+
+- A component in place of a tag receives the element's attributes as props
+  by their HTML names (`id`, `class`, `href`) and the children in its
+  default slot.
+- A component in place of a directive receives the directive's attributes by
+  the names they were written with — `:::callout{kind="warning"}` gives
+  `kind` — and the children in its default slot. The marker is left out.
+
+## Render function
+
+`render(tree, components)` returns the vnode children for a tree, for a
+render function of your own. `MARKER` is the property that names a directive
+on its element.

package/package.json

@@ -1,6 +1,40 @@
 {
   "name": "@prosary/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.0",
+  "description": "Vue renderer for prosary content: an HTML tree to vnodes, with component overrides",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zoobzio/prosary.git",
+    "directory": "integrations/vue"
+  },
+  "type": "module",
+  "main": "./.dist/index.mjs",
+  "types": "./.dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./.dist/index.d.mts",
+      "import": "./.dist/index.mjs"
+    }
+  },
+  "files": [
+    ".dist"
+  ],
+  "scripts": {
+    "build": "obuild",
+    "stub": "obuild --stub",
+    "lint": "oxlint",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@types/hast": "catalog:",
+    "property-information": "catalog:"
+  },
+  "peerDependencies": {
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "vue": "catalog:"
+  }
+}