npm - do11y - Versions diffs - 0.0.0 - Mend

do11y 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/README.md +8 -0
package/dist/docs/cli.d.ts +1 -0
package/dist/docs/cli.js +23 -0
package/dist/docs/files.d.ts +5 -0
package/dist/docs/files.js +8 -0
package/dist/docs/html/index.html +13 -0
package/dist/docs/html/plugin.d.ts +2 -0
package/dist/docs/html/plugin.js +25 -0
package/dist/docs/html/render.d.ts +1 -0
package/dist/docs/html/render.js +19 -0
package/dist/docs/index.d.ts +31 -0
package/dist/docs/index.js +2 -0
package/dist/docs/options.d.ts +5 -0
package/dist/docs/options.js +5 -0
package/dist/docs/plugins/markdown.d.ts +31 -0
package/dist/docs/plugins/markdown.js +49 -0
package/dist/docs/plugins/meta/meta-mapper.d.ts +3 -0
package/dist/docs/plugins/meta/meta-mapper.js +39 -0
package/dist/docs/plugins/meta/meta-types.d.ts +56 -0
package/dist/docs/plugins/meta/meta-types.js +1 -0
package/dist/docs/plugins/meta/meta.d.ts +7 -0
package/dist/docs/plugins/meta/meta.js +52 -0
package/dist/docs/plugins/options.d.ts +36 -0
package/dist/docs/plugins/options.js +13 -0
package/dist/docs/plugins/plugins.d.ts +2 -0
package/dist/docs/plugins/plugins.js +17 -0
package/dist/docs/plugins/routes.d.ts +7 -0
package/dist/docs/plugins/routes.js +56 -0
package/dist/docs/plugins/sandbox.d.ts +7 -0
package/dist/docs/plugins/sandbox.js +88 -0
package/dist/docs/plugins/ui.d.ts +6 -0
package/dist/docs/plugins/ui.js +6 -0
package/dist/docs/vite-config.d.ts +27 -0
package/dist/docs/vite-config.js +62 -0
package/dist/ui/index.js +1 -0
package/dist/ui/sandbox-iframe.js +1 -0
package/dist/ui/sandbox.js +1 -0
package/package.json +67 -0
package/src/types.d.ts +45 -0

package/README.md ADDED Viewed

@@ -0,0 +1,8 @@
+# Do11y
+A bare-bones tool to document Vue components.
+- Write documentation in markdown files that turn into single file components.
+- Import markdown files as routes through `do11y:routes`.
+- Create sandbox components - e.g. `Button.sandbox.vue` will be available under the url `/sandbox?id=button`, and if importing the component it will be wrapped inside an iframe component that has access to the source code with or without compiled CSS.
+- Easily document components through meta imports which give a simplified result from [vue-component-meta](https://www.npmjs.com/package/vue-component-meta) - e.g. `Button.vue?meta`.

package/dist/docs/cli.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/docs/cli.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { createServer, build, preview, mergeConfig } from "vite";
+import { getUserViteConfig, getUserVuePlugin, viteConfig } from "./vite-config.js";
+const [_, __, command = "dev"] = process.argv;
+if (command !== "dev" && command !== "build" && command !== "preview") {
+    throw new Error();
+}
+const userViteConfig = await getUserViteConfig(command);
+const vuePlugin = await getUserVuePlugin(userViteConfig);
+const mergedViteConfig = mergeConfig({ plugins: [vuePlugin] }, viteConfig);
+if (command === "dev") {
+    const server = await createServer(mergedViteConfig);
+    await server.listen();
+    server.printUrls();
+    server.bindCLIShortcuts({ print: true });
+}
+else {
+    await build(mergedViteConfig);
+    if (command === "preview") {
+        const previewServer = await preview(mergedViteConfig);
+        previewServer.printUrls();
+        previewServer.bindCLIShortcuts({ print: true });
+    }
+}

package/dist/docs/files.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const ui: string;
+export declare const root: string;
+export declare const docs: string;
+export declare const output: string;
+export declare const do11y: string;

package/dist/docs/files.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { join } from "node:path";
+import { searchForWorkspaceRoot } from "vite";
+export const ui = join(import.meta.dirname, "../ui");
+export const root = searchForWorkspaceRoot(process.cwd());
+// export const root = join(searchForWorkspaceRoot(process.cwd()), "example");
+export const docs = join(root, "docs");
+export const output = join(docs, "dist");
+export const do11y = join(docs, "do11y", "do11y.ts");

package/dist/docs/html/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Do11y</title>
+    <link rel="icon" href="/favicon.ico" />
+  </head>
+  <body id="app"></body>
+</html>

package/dist/docs/html/plugin.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { Plugin } from "vite";
2	+ export declare const indexHtml: (folder: string, key: "index" \| "sandbox") => Omit<Plugin, "name">;

package/dist/docs/html/plugin.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { join } from "node:path";
+import { writeFileSync } from "node:fs";
+import { output } from "../files.js";
+import { render } from "./render.js";
+export const indexHtml = (folder, key) => ({
+    writeBundle() {
+        const html = render(`/assets/${key}.js`, `/assets/${key}.css`);
+        const indexHtmlFile = join(output, `${key}.html`);
+        writeFileSync(indexHtmlFile, html);
+    },
+    configureServer(server) {
+        const bundle = join(folder, `${key}.js`);
+        const sandboxBundle = join(folder, "sandbox.js");
+        server.middlewares.use(async (req, res, next) => {
+            if (!req.url || req.method !== "GET" || !req.headers.accept?.includes("text/html")) {
+                return next();
+            }
+            const html = render(`/@fs/${req.url?.startsWith("/sandbox") ? sandboxBundle : bundle}`);
+            const transformedHtml = await server.transformIndexHtml(req.url, html);
+            res.statusCode = 200;
+            res.setHeader("content-type", "text/html; charset=UTF-8");
+            res.end(transformedHtml);
+        });
+    },
+});

package/dist/docs/html/render.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const render: (script: string, stylesheet?: string) => string;

package/dist/docs/html/render.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { JSDOM } from "jsdom";
+const template = readFileSync(join(import.meta.dirname, "index.html"), "utf-8");
+export const render = (script, stylesheet) => {
+    const jsdom = new JSDOM(template);
+    const scriptElement = jsdom.window.document.createElement("script");
+    scriptElement.setAttribute("type", "module");
+    scriptElement.setAttribute("src", script);
+    jsdom.window.document.documentElement.appendChild(scriptElement);
+    if (stylesheet) {
+        const linkElement = jsdom.window.document.createElement("link");
+        linkElement.setAttribute("as", "style");
+        linkElement.setAttribute("rel", "preload stylesheet");
+        linkElement.setAttribute("href", stylesheet);
+        jsdom.window.document.head.appendChild(linkElement);
+    }
+    return jsdom.serialize();
+};

package/dist/docs/index.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import type { Options } from "./plugins/options.js";
+import type { Meta } from "./plugins/meta/meta-types.js";
+export type { Options, Meta };
+export interface SandboxIframeProps {
+    /**
+     * The `id` of the sandbox - which is the filename
+     * in lower-case without the extension.
+     *
+     * @do11y Automatically passed.
+     */
+    id: string;
+    /**
+     * The sandbox url.
+     *
+     * @do11y Automatically passed.
+     */
+    url: string;
+    /**
+     * The source code.
+     *
+     * @do11y Automatically passed.
+     */
+    source?: string;
+    /**
+     * The source code with compiled CSS.
+     * Only included if the style tag has lang `scss` or `sass`.
+     *
+     * @do11y Automatically passed.
+     */
+    sourceWithCompiledCss?: string;
+}

package/dist/docs/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /* Entryfile for `do11y` package */
2	+ export {};

package/dist/docs/options.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { Options } from "./plugins/options.js";
+/**
+ * Access plugin options (`docs/do11y/index.ts`).
+ */
+export declare const do11yOptions: Options;

package/dist/docs/options.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { do11y } from "./files.js";
+/**
+ * Access plugin options (`docs/do11y/index.ts`).
+ */
+export const do11yOptions = (await import(do11y)).default;

package/dist/docs/plugins/markdown.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { type MarkdownSfcBlocks } from "@mdit-vue/plugin-sfc";
+import type { PluginSimple } from "markdown-it";
+import type { Plugin } from "vite";
+import type MarkdownIt from "markdown-it";
+export interface MarkdownPluginOptions {
+    /**
+     * Additional markdown-it setup.
+     */
+    markdownSetup?: PluginSimple;
+    /**
+     * The highlight option for `markdown-it`.
+     */
+    markdownHighlight?: (md: MarkdownIt, code: string, lang: string, attrs: string) => string;
+}
+export interface MarkdownItEnv {
+    /**
+     * Blocks extracted by `@mdit-vue/plugin-sfc`.
+     */
+    sfcBlocks?: MarkdownSfcBlocks;
+    /**
+     * Blocks extracted by `@mdit-vue/plugin-frontmatter`.
+     */
+    frontmatter?: Record<string, unknown>;
+}
+/**
+ * Processes blocks with the lang set to `md` into HTML,
+ * and turns `.md` files into single file vue components
+ * using `markdown-it` and `@mdit-vue`.
+ */
+declare const _default: (options?: MarkdownPluginOptions) => Plugin;
+export default _default;

package/dist/docs/plugins/markdown.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { componentPlugin } from "@mdit-vue/plugin-component";
+import { sfcPlugin } from "@mdit-vue/plugin-sfc";
+import { frontmatterPlugin } from "@mdit-vue/plugin-frontmatter";
+import attrsPlugin from "markdown-it-attrs";
+import markdown from "markdown-it";
+/**
+ * Processes blocks with the lang set to `md` into HTML,
+ * and turns `.md` files into single file vue components
+ * using `markdown-it` and `@mdit-vue`.
+ */
+export default (options) => {
+    const md = markdown({
+        html: true,
+        highlight(code, lang, attrs) {
+            return options?.markdownHighlight?.(md, code, lang, attrs) ?? "";
+        },
+    });
+    md.use(frontmatterPlugin);
+    md.use(sfcPlugin);
+    md.use(componentPlugin);
+    md.use(attrsPlugin);
+    if (options?.markdownSetup) {
+        md.use(options.markdownSetup);
+    }
+    return {
+        name: "do11y:markdown",
+        enforce: "pre",
+        transform(code, id) {
+            if (id.endsWith(".md")) {
+                const env = {};
+                const html = md.render(code, env);
+                /**
+                 * If it's a markdown block, return the
+                 * html directly - otherwise create
+                 * a single file component.
+                 */
+                if (id.endsWith("lang.md")) {
+                    return html;
+                }
+                else {
+                    const template = env.sfcBlocks?.template?.content ?? "";
+                    const script = env.sfcBlocks?.scriptSetup?.contentStripped ?? "";
+                    const styles = env.sfcBlocks?.styles.map((s) => s.content).join("\n\n") ?? "";
+                    return `${template}\n\n<script setup>${script}</script>\n\n${styles}`;
+                }
+            }
+        },
+    };
+};

package/dist/docs/plugins/meta/meta-mapper.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { ComponentMeta } from "vue-component-meta";
+import type { Meta } from "./meta-types";
+export declare const mapMeta: (meta: ComponentMeta, render: (input: string) => string) => Meta;

package/dist/docs/plugins/meta/meta-mapper.js ADDED Viewed

@@ -0,0 +1,39 @@
+export const mapMeta = (meta, render) => {
+    const nonGlobalProps = meta.props.filter((prop) => !prop.global);
+    const getDeprecated = (tags) => {
+        const deprecated = getTag(tags, "deprecated");
+        return deprecated ? deprecated.text || true : false;
+    };
+    const getFilteredTags = (tags) => {
+        const filteredTags = tags.filter((t) => !["default", "deprecated"].includes(t.name));
+        return filteredTags.map((tag) => ({
+            name: tag.name,
+            text: tag.text ? render(tag.text) : undefined,
+        }));
+    };
+    const mapEvent = (prop) => ({
+        name: prop.name,
+        type: prop.type,
+        description: prop.description ? render(prop.description) : undefined,
+        deprecated: getDeprecated(prop.tags),
+        tags: getFilteredTags(prop.tags),
+    });
+    const mapSlotAndExposed = (se) => ({
+        name: se.name,
+        type: se.type,
+        description: se.description ? render(se.description) : undefined,
+    });
+    const mapProperty = (prop) => ({
+        ...mapEvent(prop),
+        default: prop.default || getTag(prop.tags, "default")?.text,
+        required: prop.required,
+    });
+    return {
+        description: meta.description ? render(meta.description) : "",
+        props: nonGlobalProps.map((prop) => mapProperty(prop)),
+        events: meta.events.map((event) => mapEvent(event)),
+        slots: meta.slots.map((slot) => mapSlotAndExposed(slot)),
+        exposed: meta.exposed.map((exposed) => mapSlotAndExposed(exposed)),
+    };
+};
+const getTag = (tags, tag) => tags.find(({ name }) => name === tag);

package/dist/docs/plugins/meta/meta-types.d.ts ADDED Viewed

@@ -0,0 +1,56 @@
+import { PropertyMeta } from "vue-component-meta";
+interface Property {
+    /**
+     * The name of the prop.
+     */
+    name: string;
+    /**
+     * The type expected for the prop.
+     */
+    type: string;
+    /**
+     * The HTML description.
+     */
+    description?: string;
+    /**
+     * If the prop has been marked with `@deprecated`.
+     */
+    deprecated: string | boolean;
+    /**
+     * JSDOC tags - filtered so that `@deprecated` and
+     * `@default` are not included.
+     */
+    tags: PropertyMeta["tags"][number][];
+    /**
+     * The default.
+     * If one can't be calculated - falls back to the `@default` tag.
+     */
+    default?: string;
+    /**
+     * If the prop is required.
+     */
+    required: boolean;
+}
+export interface Meta {
+    /**
+     * The HTML description for the component.
+     */
+    description?: string;
+    /**
+     * The props.
+     */
+    props: Property[];
+    /**
+     * The emits.
+     */
+    events: Omit<Property, "default" | "required">[];
+    /**
+     * The slots.
+     */
+    slots: Pick<Property, "name" | "type" | "description">[];
+    /**
+     * The exposed properties.
+     */
+    exposed: Pick<Property, "name" | "type" | "description">[];
+}
+export {};

package/dist/docs/plugins/meta/meta-types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/docs/plugins/meta/meta.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { Plugin } from "vite";
+/**
+ * Adds `.vue?meta` imports which returns a simplified result
+ * of running the component through `vue-component-meta`.
+ */
+declare const _default: () => Plugin;
+export default _default;

package/dist/docs/plugins/meta/meta.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { createChecker } from "vue-component-meta";
+import { parse as parseVue } from "vue/compiler-sfc";
+import markdown from "markdown-it";
+import { root } from "../../files.js";
+import { mapMeta } from "./meta-mapper.js";
+const getFirstExistingFile = (...paths) => {
+    for (const path of paths) {
+        if (existsSync(path)) {
+            return path;
+        }
+    }
+};
+/**
+ * Adds `.vue?meta` imports which returns a simplified result
+ * of running the component through `vue-component-meta`.
+ */
+export default () => {
+    const tsconfig = getFirstExistingFile(join(root, "tsconfig.app.json"), join(root, "tsconfig.json"));
+    if (!tsconfig) {
+        return {
+            name: "do11y:meta",
+        };
+    }
+    const checker = createChecker(tsconfig, {
+        noDeclarations: true,
+    });
+    const md = markdown();
+    return {
+        name: "do11y:meta",
+        transform(_, id) {
+            if (id.endsWith(".vue?meta")) {
+                const file = id.replace("?meta", "");
+                const content = readFileSync(file, "utf-8");
+                const { descriptor } = parseVue(content, { ignoreEmpty: true });
+                const block = descriptor.customBlocks.find((b) => b.type === "docs" && b.lang === "md");
+                const description = block ? md.render(block.content) || undefined : undefined;
+                const meta = checker.getComponentMeta(file);
+                const mappedMeta = {
+                    ...mapMeta(meta, (content) => md.render(content)),
+                    description: description || meta.description,
+                };
+                const code = `export default ${JSON.stringify(mappedMeta)}`;
+                return {
+                    code,
+                    moduleType: "js",
+                };
+            }
+        },
+    };
+};

package/dist/docs/plugins/options.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import type { Plugin } from "vite";
+import type { App, Component } from "vue";
+import type { Router } from "vue-router";
+import type { MarkdownPluginOptions } from "./markdown.js";
+export interface Options extends MarkdownPluginOptions {
+    /**
+     * The home page component.
+     */
+    Home: () => Promise<Component>;
+    /**
+     * The layout component for the documents.
+     */
+    Layout?: () => Promise<Component>;
+    /**
+     * Additional setup for the app.
+     */
+    setup?(app: App, router: Router): void | Promise<void>;
+    /**
+     * The wrapper component for the sandbox.
+     */
+    Sandbox?: () => Promise<Component>;
+    /**
+     * Additional setup for the sandbox app.
+     */
+    setupSandbox?(app: App): void | Promise<void>;
+    /**
+     * Custom wrapper component for `?iframe` imports.
+     */
+    SandboxIframe?: () => Promise<Component>;
+}
+/**
+ * Add ability to access options (`docs/do11y/do11y.ts`)
+ * through `do11y:options`.
+ */
+declare const _default: () => Plugin;
+export default _default;

package/dist/docs/plugins/options.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { do11y } from "../files.js";
+/**
+ * Add ability to access options (`docs/do11y/do11y.ts`)
+ * through `do11y:options`.
+ */
+export default () => ({
+    name: "do11y:options",
+    async resolveId(id, importer) {
+        if (id === "do11y:options") {
+            return this.resolve(do11y.replace(".ts", ".js"), importer);
+        }
+    },
+});

package/dist/docs/plugins/plugins.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { Plugin } from "vite";
2	+ export declare const plugins: () => Plugin[];

package/dist/docs/plugins/plugins.js ADDED Viewed

@@ -0,0 +1,17 @@
+import ui from "./ui.js";
+import sandbox from "./sandbox.js";
+import meta from "./meta/meta.js";
+import markdown from "./markdown.js";
+import block from "v-custom-block";
+import options from "./options.js";
+import routes from "./routes.js";
+import { do11yOptions } from "../options.js";
+export const plugins = () => [
+    ui(),
+    sandbox(),
+    meta(),
+    markdown(do11yOptions),
+    block("docs"),
+    options(),
+    routes(),
+];

package/dist/docs/plugins/routes.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { Plugin } from "vite";
+/**
+ * Adds the ability to import routes (`*.md` files with
+ * a `title` and `slug`) through `do11y:routes`.
+ */
+declare const _default: () => Plugin;
+export default _default;

package/dist/docs/plugins/routes.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { readFileSync } from "node:fs";
+import { globSync } from "tinyglobby";
+import { root } from "../files.js";
+import fm from "front-matter";
+/**
+ * Adds the ability to import routes (`*.md` files with
+ * a `title` and `slug`) through `do11y:routes`.
+ */
+export default () => {
+    const moduleId = "do11y:routes";
+    const resolvedModuleId = "\0" + moduleId;
+    const markdownFiles = globSync(["(docs|src|packages)/**/*.md"], {
+        ignore: ["**/node_modules/**", "**/dist/**"],
+        expandDirectories: false,
+        absolute: true,
+        cwd: root,
+    });
+    /* prettier-ignore */
+    const pages = markdownFiles
+        .map((path) => ({ path, frontmatter: fm(readFileSync(path, "utf-8")).attributes }))
+        .filter((file) => typeof file.frontmatter.title === "string" && typeof file.frontmatter.slug === "string");
+    return {
+        name: "do11y:routes",
+        resolveId(id) {
+            if (id === moduleId) {
+                return resolvedModuleId;
+            }
+        },
+        load(id) {
+            if (id === resolvedModuleId) {
+                const stringifiedRoutes = pages.map((route) => {
+                    return `{
+            path: "${route.frontmatter.slug}",
+            meta: ${JSON.stringify(route.frontmatter)},
+            component: async () => (await import("${route.path}")).default
+          }`.trim();
+                });
+                const homeMeta = {
+                    title: "Home",
+                    slug: "/",
+                };
+                return `
+          import options from 'do11y:options';
+          const home = {
+            path: "/",
+            meta: ${JSON.stringify(homeMeta)},
+            component: options.Home
+          };
+          export default [home, ${stringifiedRoutes.join(",\n")}];
+        `;
+            }
+        },
+    };
+};

package/dist/docs/plugins/sandbox.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { Plugin } from "vite";
+/**
+ * Creates a seprate sandbox app, and
+ * adds access to sandbox components through `do11y:sandbox`.
+ */
+declare const _default: () => Plugin;
+export default _default;

package/dist/docs/plugins/sandbox.js ADDED Viewed

@@ -0,0 +1,88 @@
+import { join, parse } from "node:path";
+import { readFileSync } from "node:fs";
+import { pathToFileURL } from "node:url";
+import { compileString } from "sass";
+import { globSync } from "tinyglobby";
+import { parse as parseVue } from "vue/compiler-sfc";
+import { root, ui } from "../files.js";
+import { indexHtml } from "../html/plugin.js";
+const toParamId = (path) => parse(path).name.toLowerCase().replace(".sandbox", "");
+/**
+ * Creates a seprate sandbox app, and
+ * adds access to sandbox components through `do11y:sandbox`.
+ */
+export default () => {
+    const moduleId = "do11y:sandbox";
+    const resolvedModuleId = "\0" + moduleId;
+    const sandboxFiles = globSync(["(docs|src|packages)/**/*.sandbox.vue"], {
+        ignore: ["**/node_modules/**", "**/dist/**"],
+        expandDirectories: false,
+        absolute: true,
+        cwd: root,
+    });
+    return {
+        name: "do11y:sandbox",
+        ...indexHtml(ui, "sandbox"),
+        resolveId(id) {
+            if (id === moduleId) {
+                return resolvedModuleId;
+            }
+        },
+        load(id) {
+            if (id === resolvedModuleId) {
+                const stringifiedSandboxes = sandboxFiles.map((path) => {
+                    return `{
+            url: "${toParamId(path)}",
+            component: async () => (await import("${path}?default")).default
+          }`.trim();
+                });
+                return `export default [${stringifiedSandboxes.join(",\n")}];`;
+            }
+        },
+        transform(_, id) {
+            if (id.endsWith(".sandbox.vue")) {
+                let source = readFileSync(id, "utf-8");
+                const { descriptor } = parseVue(source, {
+                    filename: id,
+                    ignoreEmpty: true,
+                });
+                const usesSass = descriptor.styles.some((s) => ["sass", "scss"].includes(s.lang));
+                let sourceWithCompiledCss = source.replace(/\n<style\b[^>]*>[\s\S]*?<\/style>/gi, "");
+                if (usesSass) {
+                    for (const style of descriptor.styles) {
+                        const compiledStyle = compileString(style.content, {
+                            url: pathToFileURL(id),
+                        });
+                        const attributes = Object.entries(style.attrs)
+                            .filter(([key]) => key !== "lang")
+                            .map(([key, value]) => `${key}="${value}"`);
+                        const stringifiedAttributes = attributes.length ? ` ${attributes.join(" ")}` : "";
+                        sourceWithCompiledCss += `<style${stringifiedAttributes}>\n${compiledStyle.css}\n</style>`;
+                    }
+                    /* Fix lack of new lines between style tags */
+                    sourceWithCompiledCss = sourceWithCompiledCss
+                        .replace(/\n\n\n<style/gi, "\n\n<style")
+                        .replace("</style><style", "</style>\n\n<style");
+                }
+                const code = `
+          import { defineComponent, h } from "vue";
+          import SandboxIframe from "${join(ui, "sandbox-iframe.js")}";
+          export default defineComponent((props) => {
+            return () => h(SandboxIframe, {
+              id: "${toParamId(id)}",
+              source: ${JSON.stringify(source)},
+              sourceWithCompiledCss: ${usesSass ? JSON.stringify(sourceWithCompiledCss) : "undefined"},
+              passedProps: props,
+            });
+          });
+        `.trim();
+                return {
+                    code,
+                    moduleType: "js",
+                };
+            }
+        },
+    };
+};

package/dist/docs/plugins/ui.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { Plugin } from "vite";
+/**
+ * The main documentation app.
+ */
+declare const _default: () => Plugin;
+export default _default;

package/dist/docs/plugins/ui.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { ui } from "../files.js";
+import { indexHtml } from "../html/plugin.js";
+/**
+ * The main documentation app.
+ */
+export default () => ({ name: "do11y:ui", ...indexHtml(ui, "index") });

package/dist/docs/vite-config.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { type Plugin, type UserConfig } from "vite";
+import type { Api } from "@vitejs/plugin-vue";
+export declare const getUserViteConfig: (command: "dev" | "build" | "preview") => Promise<UserConfig>;
+export declare const getUserVuePlugin: (userViteConfig: UserConfig) => Promise<Plugin<Api>>;
+export declare const viteConfig: {
+    root: string;
+    plugins: Plugin<any>[];
+    server: {
+        port: number;
+    };
+    preview: {
+        port: number;
+    };
+    build: {
+        manifest: true;
+        outDir: string;
+        rollupOptions: {
+            input: {
+                index: string;
+                sandbox: string;
+            };
+            output: {
+                entryFileNames: string;
+            };
+        };
+    };
+};

package/dist/docs/vite-config.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { join } from "node:path";
+import { loadConfigFromFile } from "vite";
+import { docs, ui, output } from "./files.js";
+import { plugins } from "./plugins/plugins.js";
+export const getUserViteConfig = async (command) => {
+    const userConfigFile = await loadConfigFromFile({
+        command: command === "dev" ? "serve" : "build",
+        mode: command === "dev" ? "dev" : "build",
+    });
+    return userConfigFile?.config ?? {};
+};
+const getPlugin = async (plugin) => {
+    if (!plugin) {
+        return [];
+    }
+    if (typeof plugin === "function") {
+        return [await plugin()];
+    }
+    else if ("name" in plugin) {
+        return [plugin];
+    }
+    else if (Array.isArray(plugin)) {
+        return (await Promise.all(plugin.map(async (p) => await getPlugin(p)))).flat();
+    }
+    else {
+        return (await getPlugin(await plugin)).flat();
+    }
+};
+export const getUserVuePlugin = async (userViteConfig) => {
+    const userPlugins = userViteConfig.plugins?.map(async (p) => await getPlugin(p)) ?? [];
+    const resolvedUserPlugins = (await Promise.all(userPlugins)).flat();
+    const vuePluginApi = resolvedUserPlugins.find((p) => p.name === "vite:vue").api;
+    const VuePlugin = (await import("@vitejs/plugin-vue")).default;
+    return VuePlugin({
+        ...vuePluginApi.options,
+        include: [/\.vue$/, /\.md$/],
+        exclude: [/\.vue\?meta$/],
+    });
+};
+export const viteConfig = {
+    root: docs,
+    plugins: plugins(),
+    server: {
+        port: 1998,
+    },
+    preview: {
+        port: 1996,
+    },
+    build: {
+        manifest: true,
+        outDir: output,
+        rollupOptions: {
+            input: {
+                index: join(ui, "index.js"),
+                sandbox: join(ui, "sandbox.js"),
+            },
+            output: {
+                entryFileNames: "assets/[name].js",
+            },
+        },
+    },
+};

package/dist/ui/index.js ADDED Viewed

@@ -0,0 +1 @@

+ import{createApp as e,createBlock as t,createCommentVNode as n,defineComponent as r,onBeforeMount as i,openBlock as a,renderSlot as o,shallowRef as s,unref as c,withCtx as l}from"vue";import u from"do11y:options";import{createRouter as d,createWebHistory as f}from"vue-router";import p from"do11y:routes";var m=r({__name:`Page`,setup(e){let n=s();return i(async()=>{n.value=(await u.Layout?.())?.default}),(e,r)=>n.value?(a(),t(c(n),{key:0},{default:l(()=>[o(e.$slots,`default`)]),_:3})):o(e.$slots,`default`,{key:1})}});(async()=>{let t=d({history:f(`/`),routes:p}),n=e(m);await u.setup?.(n,t),n.use(t),n.mount(`#app`)})();

package/dist/ui/sandbox-iframe.js ADDED Viewed

@@ -0,0 +1 @@

+ import{computed as e,createBlock as t,createCommentVNode as n,createElementBlock as r,defineComponent as i,mergeProps as a,onBeforeMount as o,openBlock as s,shallowRef as c,unref as l}from"vue";import u from"do11y:options";var d=[`src`],f=i({__name:`SandboxIframe`,props:{id:{},url:{},source:{},sourceWithCompiledCss:{},passedProps:{}},setup(n){let i=n,f=e(()=>`/sandbox?id=${i.id}`),p=c();return o(async()=>{p.value=(await u.SandboxIframe?.())?.default}),(e,i)=>p.value?(s(),t(l(p),a({key:0,id:n.id,url:f.value,source:n.source,"source-with-compiled-css":n.sourceWithCompiledCss},n.passedProps),null,16,[`id`,`url`,`source`,`source-with-compiled-css`])):(s(),r(`iframe`,{key:1,src:f.value},null,8,d))}});export{f as default};

package/dist/ui/sandbox.js ADDED Viewed

@@ -0,0 +1 @@

+ import{createApp as e,createBlock as t,createCommentVNode as n,defineComponent as r,onBeforeMount as i,openBlock as a,shallowRef as o,unref as s,withCtx as c}from"vue";import l from"do11y:options";import{parseQuery as u}from"vue-router";import d from"do11y:sandbox";e(r({__name:`Sandbox`,setup(e){let r=u(window.location.search),f=o(),p=o();return i(async()=>{let{component:e}=d.find(({url:e})=>e===r.id)??{};f.value=(await l.Sandbox?.())?.default,p.value=await e?.()}),(e,r)=>f.value?(a(),t(s(f),{key:0},{default:c(()=>[p.value?(a(),t(s(p),{key:0})):n(``,!0)]),_:1})):n(``,!0)}})).mount(`#app`);

package/package.json ADDED Viewed

@@ -0,0 +1,67 @@
+{
+  "name": "do11y",
+  "version": "0.0.0",
+  "description": "A bare-bones tool to document Vue components.",
+  "license": "MIT",
+  "repository": "github:sq11y/do11y",
+  "bin": "./dist/docs/cli.js",
+  "files": [
+    "dist",
+    "src/types.d.ts"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/docs/index.d.ts",
+      "import": "./dist/docs/index.js"
+    },
+    "./types": "./src/types.d.ts"
+  },
+  "dependencies": {
+    "@mdit-vue/plugin-component": "^3.0.2",
+    "@mdit-vue/plugin-frontmatter": "^3.0.2",
+    "@mdit-vue/plugin-sfc": "^3.0.2",
+    "front-matter": "^4.0.2",
+    "jsdom": "^28.1.0",
+    "markdown-it": "^14.1.1",
+    "markdown-it-attrs": "^4.3.1",
+    "sass": "^1.97.3",
+    "tinyglobby": "^0.2.15",
+    "v-custom-block": "^1.0.67",
+    "vue-component-meta": "^3.2.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node24": "^24.0.4",
+    "@types/jsdom": "^27.0.0",
+    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-attrs": "^4.1.3",
+    "@types/node": "24.10.3",
+    "@vue/tsconfig": "^0.8.1",
+    "copyfiles": "^2.4.1",
+    "jiti": "^2.6.1",
+    "npm-run-all2": "^8.0.4",
+    "oxfmt": "^0.32.0",
+    "oxlint": "^1.47.0",
+    "typescript": "~5.9.3"
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "^6.0.3",
+    "vite": "8.0.0-beta.14",
+    "vue": "^3.5.28",
+    "vue-router": "^5.0.2",
+    "vue-tsc": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "dev": "pnpm run -r dev",
+    "preview": "pnpm run -r preview",
+    "build:node": "tsc --p tsconfig.node.json && copyfiles -f src/docs/html/index.html dist/docs/html",
+    "build:client": "vue-tsc --build && vite build",
+    "build:example": "pnpm run -r build",
+    "build": "pnpm '/^build:.*/'",
+    "lint": "oxlint . --fix",
+    "fmt": "oxfmt ."
+  }
+}

package/src/types.d.ts ADDED Viewed

@@ -0,0 +1,45 @@
+declare module "do11y:routes" {
+  import type { RouteRecordRaw as VueRouteRecordRaw, RouterOptions } from "vue-router";
+  type RouteRecordRaw = VueRouteRecordRaw & {
+    meta: {
+      title: string;
+      slug: string;
+    };
+  };
+  const routes: RouteRecordRaw[];
+  export default routes;
+}
+declare module "do11y:options" {
+  import type { Options } from "do11y";
+  const options: Omit<Options, "Layout" | "Sandbox" | "SandboxIframe"> & {
+    Layout: () => Promise<{ default: Component }>;
+    Sandbox?: () => Promise<{ default: Component }>;
+    SandboxIframe?: () => Promise<{ default: Component }>;
+  };
+  export default options;
+}
+declare module "do11y:sandbox" {
+  import type { Component } from "vue";
+  const sandboxes: {
+    url: string;
+    component: () => Promise<Component>;
+  }[];
+  export default sandboxes;
+}
+declare module "*.vue?meta" {
+  import type { Meta } from "do11y";
+  const meta: Meta;
+  export default meta;
+}