do11y 0.4.2 → 0.5.0

package/dist/docs/html/plugin.js

@@ -3,8 +3,15 @@ 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`);
+    writeBundle(_, bundle) {
+        const chunk = Object.values(bundle).find((chunk) => {
+            return chunk.type === "chunk" && chunk.isEntry && chunk.facadeModuleId?.endsWith(`${key}.js`);
+        });
+        if (!chunk) {
+            throw new Error(`Failed to create HTML file for ${key}.`);
+        }
+        const stylesheets = Array.from(chunk.viteMetadata?.importedCss || []);
+        const html = render(chunk.fileName, stylesheets);
         writeFileSync(join(output, `${key}.html`), html);
         if (key === "index") {
             writeFileSync(join(output, "404.html"), html);

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

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

package/dist/docs/html/render.js

@@ -2,13 +2,13 @@ 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) => {
+export const render = (script, stylesheets = []) => {
     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) {
+    for (const stylesheet of stylesheets) {
         const linkElement = jsdom.window.document.createElement("link");
         linkElement.setAttribute("as", "style");
         linkElement.setAttribute("rel", "preload stylesheet");

package/dist/docs/index.d.ts

@@ -2,6 +2,10 @@ import type { Options } from "./plugins/options.js";
 import type { Meta } from "./plugins/meta/meta-types.js";
 export type { Options, Meta };
 export interface SandboxIframeProps {
+    /**
+     * The accessible title for the Iframe.
+     */
+    title: string;
     /**
      * The `id` of the sandbox - which is the filename
      * in lower-case without the extension.

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

@@ -1,5 +1,5 @@
 import type { Plugin } from "vite";
-import type { App, Component } from "vue";
+import type { App } from "vue";
 import type { Router } from "vue-router";
 import type { BundledTheme, ShikiTransformer, StringLiteralUnion, ThemeInput } from "shiki";
 import type { MarkdownPluginOptions } from "./markdown.js";
@@ -8,18 +8,10 @@ export interface Options extends MarkdownPluginOptions {
      * Additional setup for the app.
      */
     setup?(app: App, router: Router): void | Promise<void>;
-    /**
-     * The wrapper component for sandboxes.
-     */
-    Sandbox?: () => Promise<Component>;
     /**
      * Additional setup for the sandbox app.
      */
     setupSandbox?(app: App): void | Promise<void>;
-    /**
-     * Custom wrapper component for `.vue.sandbox` imports.
-     */
-    SandboxIframe?: () => Promise<Component>;
     /**
      * The code highlighter.
      *   - Markdown code blocks
@@ -76,9 +68,15 @@ export interface ResolvedOptions extends Omit<Options, "highlighter"> {
     };
 }
 /**
- * Add ability to access options (`docs/do11y/do11y.ts`)
- * through `do11y:options`, the home component through `do11y:home`,
- * and the layout component through `do11y:page-layout`.
+ * Adds the ability to import options and setup files.
+ *
+ * `do11y:options` → `docs/do11y/do11y.ts`
+ *
+ * `do11y:home` → `docs/do11y/pages/Home.vue`
+ * `do11y:page-layout` → `docs/do11y/layout/Page.vue`
+ *
+ * `do11y:sandbox` → `docs/do11y/pages/Sandbox.vue`
+ * `do11y:sandbox-iframe` → `docs/do11y/layout/SandboxIframe.vue`
  */
 declare const _default: () => Plugin;
 export default _default;

package/dist/docs/plugins/options.js

@@ -2,37 +2,41 @@ import { existsSync } from "node:fs";
 import { join } from "node:path";
 import { do11y } from "../files.js";
 /**
- * Add ability to access options (`docs/do11y/do11y.ts`)
- * through `do11y:options`, the home component through `do11y:home`,
- * and the layout component through `do11y:page-layout`.
+ * Adds the ability to import options and setup files.
+ *
+ * `do11y:options` → `docs/do11y/do11y.ts`
+ *
+ * `do11y:home` → `docs/do11y/pages/Home.vue`
+ * `do11y:page-layout` → `docs/do11y/layout/Page.vue`
+ *
+ * `do11y:sandbox` → `docs/do11y/pages/Sandbox.vue`
+ * `do11y:sandbox-iframe` → `docs/do11y/layout/SandboxIframe.vue`
  */
-export default () => ({
-    name: "do11y:options",
-    async resolveId(id, importer) {
-        if (id === "do11y:options") {
-            return this.resolve(join(do11y, "do11y.js"), importer);
-        }
-        if (id === "do11y:home") {
-            const homeFile = join(do11y, "pages", "Home.vue");
-            /* prettier-ignore */
-            return existsSync(homeFile)
-                ? this.resolve(homeFile, importer)
-                : `\0do11y:home`;
-        }
-        if (id === "do11y:page-layout") {
-            const pageLayoutFile = join(do11y, "layout", "Page.vue");
-            /* prettier-ignore */
-            return existsSync(pageLayoutFile)
-                ? this.resolve(pageLayoutFile, importer)
-                : `\0do11y:page-layout`;
-        }
-    },
-    async load(id) {
-        if (id === `\0do11y:home` || id === `\0do11y:page-layout`) {
-            return {
-                code: "export default undefined",
-                moduleType: "js",
-            };
-        }
-    },
-});
+export default () => {
+    const setupFiles = {
+        "do11y:options": join(do11y, "do11y.js"),
+        "do11y:home": join(do11y, "pages", "Home.vue"),
+        "do11y:page-layout": join(do11y, "layout", "Page.vue"),
+        "do11y:sandbox": join(do11y, "pages", "Sandbox.vue"),
+        "do11y:sandbox-iframe": join(do11y, "layout", "SandboxIframe.vue"),
+    };
+    return {
+        name: "do11y:options",
+        async resolveId(id, importer) {
+            if (Object.keys(setupFiles).includes(id)) {
+                /* prettier-ignore */
+                return existsSync(setupFiles[id])
+                    ? this.resolve(setupFiles[id], importer)
+                    : `\0${id}`;
+            }
+        },
+        async load(id) {
+            if (id.startsWith("\0") && Object.keys(setupFiles).includes(id.replace("\0", ""))) {
+                return {
+                    code: "export default undefined",
+                    moduleType: "js",
+                };
+            }
+        },
+    };
+};

package/dist/docs/plugins/routes.js

@@ -2,8 +2,8 @@ import { join, parse } from "node:path";
 import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { globSync } from "tinyglobby";
 import { root, do11y } from "../files.js";
-import fm from "front-matter";
 import { toParamId } from "./sandbox.js";
+import fm from "front-matter";
 /**
  * Adds the ability to import routes through `do11y:routes`.
  *
@@ -24,9 +24,10 @@ export default () => {
         .map((path) => ({ path, frontmatter: fm(readFileSync(path, "utf-8")).attributes }))
         .filter((file) => typeof file.frontmatter.title === "string" && typeof file.frontmatter.slug === "string");
     /* prettier-ignore */
-    const pages = existsSync(join(do11y, "pages"))
+    let pages = existsSync(join(do11y, "pages"))
         ? readdirSync(join(do11y, "pages")).filter((page) => page !== "Home.vue" && (page.endsWith(".md") || page.endsWith(".vue")))
         : [];
+    pages = pages.filter((page) => page !== "Sandbox.vue");
     return {
         name: "do11y:routes",
         resolveId(id) {
@@ -60,8 +61,6 @@ export default () => {
           import Home from 'do11y:home';
           import options from 'do11y:options';
 
-          import { RouterView } from 'vue-router';
-
           const homeRoute = {
             path: "/",
             component: Home,
@@ -72,7 +71,7 @@ export default () => {
             }
           };
 
-          const customRoutes = (options.routes ?? []).map(page => ({
+          const customRoutes = (options?.routes ?? []).map(page => ({
             ...page,
 
             meta: {

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

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

package/dist/docs/plugins/sandbox.js

@@ -5,10 +5,10 @@ import { indexHtml } from "../html/plugin.js";
 export const toParamId = (path) => parse(path).name.toLowerCase().replace(".sandbox", "").replace(".vue", "");
 /**
  * Creates a seprate sandbox app, and
- * adds access to sandbox components through `do11y:sandbox`.
+ * adds access to sandbox components through `do11y:sandboxes`.
  */
 export default () => {
-    const moduleId = "do11y:sandbox";
+    const moduleId = "do11y:sandboxes";
     const resolvedModuleId = "\0" + moduleId;
     const sandboxFiles = globSync(["(docs|src|packages)/**/*.sandbox.vue"], {
         ignore: ["**/node_modules/**", "**/dist/**"],
@@ -17,7 +17,7 @@ export default () => {
         cwd: root,
     });
     return {
-        name: "do11y:sandbox",
+        name: "do11y:sandboxes",
         ...indexHtml(ui, "sandbox"),
         resolveId(id) {
             if (id === moduleId) {

package/dist/ui/index.js

@@ -1 +1 @@
-import{createApp as e,createBlock as t,defineComponent as n,onBeforeMount as r,openBlock as i,resolveComponent as a,unref as o}from"vue";import s from"do11y:options";import{createRouter as c,createWebHistory as l}from"vue-router";import u from"do11y:routes";import d from"do11y:page-layout";import f from"do11y:css";var p=n({__name:`Page`,setup(e){return r(async()=>{let e=document.createElement(`style`);e.innerHTML=f,document.head.appendChild(e)}),(e,n)=>{let r=a(`RouterView`);return o(d)?(i(),t(o(d),{key:0})):(i(),t(r,{key:1}))}}});(async()=>{let t=c({history:l(`/`),routes:u,scrollBehavior(e,t,n){if(!e.hash)return;let r=document.querySelector(e.hash);if(!r)return;let i=parseFloat(getComputedStyle(r).scrollMarginTop);return{el:e.hash,top:isNaN(i)?n?.top??0:i}}}),n=e(p);await s.setup?.(n,t),n.use(t),n.mount(`#app`)})();
+import{createApp as e,createBlock as t,defineComponent as n,onBeforeMount as r,openBlock as i,resolveComponent as a,unref as o}from"vue";import{createRouter as s,createWebHistory as c}from"vue-router";import l from"do11y:routes";import u from"do11y:options";import d from"do11y:page-layout";import f from"do11y:css";var p=n({__name:`Page`,setup(e){return r(async()=>{let e=document.createElement(`style`);e.innerHTML=f,document.head.appendChild(e)}),(e,n)=>{let r=a(`RouterView`);return o(d)?(i(),t(o(d),{key:0})):(i(),t(r,{key:1}))}}});(async()=>{let t=s({history:c(`/`),routes:l,scrollBehavior(e,t,n){if(!e.hash)return;let r=document.querySelector(e.hash);if(!r)return;let i=parseFloat(getComputedStyle(r).scrollMarginTop);return{el:e.hash,top:isNaN(i)?n?.top??0:i}}}),n=e(p);await u?.setup?.(n,t),n.use(t),n.mount(`#app`)})();

package/dist/ui/sandbox-iframe.js

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

package/dist/ui/sandbox.js

@@ -1 +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`);
+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{parseQuery as l}from"vue-router";import u from"do11y:sandboxes";import d from"do11y:sandbox";e(r({__name:`Sandbox`,setup(e){let r=l(window.location.search),f=o();return i(async()=>{let{component:e}=u.find(({url:e})=>e===r.id)??{};f.value=await e?.()}),(e,r)=>s(d)?(a(),t(s(d),{key:0},{default:c(()=>[f.value?(a(),t(s(f),{key:0})):n(``,!0)]),_:1})):n(``,!0)}})).mount(`#app`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "do11y",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "A bare-bones tool to document Vue components.",
   "keywords": [
     "docs-generator",
@@ -50,7 +50,7 @@
     "jiti": "^2.6.1",
     "oxfmt": "^0.41.0",
     "oxlint": "^1.56.0",
-    "typescript": "~5.9.3"
+    "typescript": "~6.0.2"
   },
   "peerDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",

package/src/types.d.ts

@@ -16,11 +16,13 @@ declare module "do11y: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 }>;
-  };
+  const options:
+    | (Omit<Options, "Layout" | "Sandbox" | "SandboxIframe"> & {
+        Layout: () => Promise<{ default: Component }>;
+        Sandbox?: () => Promise<{ default: Component }>;
+        SandboxIframe?: () => Promise<{ default: Component }>;
+      })
+    | undefined;
 
   export default options;
 }
@@ -37,12 +39,24 @@ declare module "do11y:page-layout" {
   export default layout;
 }
 
+declare module "do11y:sandbox" {
+  import type { Component } from "vue";
+  const sandbox: Component | undefined;
+  export default sandbox;
+}
+
+declare module "do11y:sandbox-iframe" {
+  import type { Component } from "vue";
+  const iframe: Component | undefined;
+  export default iframe;
+}
+
 declare module "do11y:css" {
   const css: string;
   export default string;
 }
 
-declare module "do11y:sandbox" {
+declare module "do11y:sandboxes" {
   import type { Component } from "vue";
 
   const sandboxes: {