do11y 0.2.9 → 0.2.11

package/dist/docs/index.d.ts

@@ -21,6 +21,13 @@ export interface SandboxIframeProps {
      * @do11y Automatically passed.
      */
     highlightedSource: string;
+    /**
+     * HTML string containing the highlighted source code,
+     * without any of the style tags.
+     *
+     * @do11y Automatically passed.
+     */
+    highlightedStylelessSource: string;
     /**
      * HTML string containing the highlighted source code,
      * with all the style tags compiled to CSS.

package/dist/docs/options.js

@@ -24,6 +24,7 @@ const resolveOptions = async () => {
             themes: options.highlighter?.themes ?? [],
             themesInput,
             transformers: options.highlighter?.transformers || [],
+            postprocess: options.highlighter?.postprocess,
         },
     };
 };

package/dist/docs/plugins/highlight/highlight.js

@@ -22,10 +22,12 @@ export const highlightCode = (code, lang) => {
             {
                 name: "do11y",
                 postprocess(html) {
-                    const jsdom = new JSDOM(html);
-                    const preTag = jsdom.window.document.querySelector("pre");
-                    do11yOptions.highlighter.postprocess?.(preTag);
-                    return preTag.parentElement.innerHTML;
+                    if (do11yOptions.highlighter.postprocess) {
+                        const jsdom = new JSDOM(html);
+                        const preTag = jsdom.window.document.querySelector("pre");
+                        do11yOptions.highlighter.postprocess(preTag);
+                        return preTag.parentElement.innerHTML;
+                    }
                 },
             },
         ],
@@ -46,9 +48,21 @@ export default () => {
             viteDevServer = server;
         },
         async transform(_, id) {
-            if (id.endsWith(".vue?highlight") || id.endsWith(".vue?highlight&lang=css")) {
-                const path = id.replace("?highlight", "").replace("&lang=css", "");
+            if (id.endsWith(".vue?highlight") ||
+                id.endsWith(".vue?highlight&lang=css") ||
+                id.endsWith(".vue?highlight&styleless")) {
+                const path = id
+                    .replace("?highlight", "")
+                    .replace("&lang=css", "")
+                    .replace("&styleless", "");
                 const source = readFileSync(path, "utf-8");
+                const sourceWithoutStyles = source.replace(/\n<style\b[^>]*>[\s\S]*?<\/style>/gi, "");
+                if (id.endsWith("styleless")) {
+                    return {
+                        code: `export default ${JSON.stringify(await highlightAndFormatCode(path, sourceWithoutStyles))};`,
+                        moduleType: "js",
+                    };
+                }
                 /**
                  * Getting the code from `load` does not work during development,
                  * so we return the original code during development.
@@ -68,7 +82,6 @@ export default () => {
                     });
                     return code?.replace(/^(export default ")/, "").replace(/"$/, "");
                 };
-                const sourceWithoutStyles = source.replace(/\n<style\b[^>]*>[\s\S]*?<\/style>/gi, "");
                 const stylesheets = parseVue(source).descriptor.styles.map((style, i) => {
                     /* prettier-ignore */
                     return !style.lang || style.lang === "css"

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

@@ -31,7 +31,7 @@ export interface Options extends MarkdownPluginOptions {
     /**
      * The code highlighter.
      *   - Markdown code blocks
-     *   - `.vue?highlight` & `.vue?highlight&lang=css` imports
+     *   - `.vue?highlight`, `.vue?highlight&lang=css` & `.vue?highlight&styleless` imports
      *   - `highlightedSource` and `highlightedCssSource` props in SandboxIframe
      *
      * If using multiple themes - you can set the `data-theme` attribute

package/dist/docs/plugins/sandbox.js

@@ -44,12 +44,14 @@ export default () => {
 
           import highlightedSource from "${id}?highlight";
           import highlightedCssSource from "${id}?highlight&lang=css";
+          import highlightedStylelessSource from "${id}?highlight&styleless";
           
           export default defineComponent((props) => {
             return () => h(SandboxIframe, {
               id: "${toParamId(id)}",
               highlightedSource,
               highlightedCssSource,
+              highlightedStylelessSource,
             });
           });
         `.trim();

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

@@ -10,6 +10,9 @@ export declare const viteConfig: {
     plugins: Plugin<any>[];
     server: {
         port: number;
+        fs: {
+            allow: string[];
+        };
     };
     preview: {
         port: number;

package/dist/docs/vite-config.js

@@ -1,6 +1,6 @@
 import { join } from "node:path";
 import { loadConfigFromFile } from "vite";
-import { docs, ui, output } from "./files.js";
+import { docs, ui, output, root } from "./files.js";
 import { plugins } from "./plugins/plugins.js";
 export const getUserViteConfig = async (command) => {
     const userConfigFile = await loadConfigFromFile({
@@ -39,7 +39,12 @@ const getUserPlugins = async (userViteConfig) => {
         VuePlugin({
             ...vuePluginApi.options,
             include: [/\.vue$/, /\.md$/],
-            exclude: [/\.vue\?meta$/, /\.vue\?highlight$/, /\.vue\?highlight&lang=css$/],
+            exclude: [
+                /\.vue\?meta$/,
+                /\.vue\?highlight$/,
+                /\.vue\?highlight&lang=css$/,
+                /\.vue\?highlight&styleless$/,
+            ],
         }),
         ...resolvedUserPlugins.filter((i) => i.name !== "vite:vue"),
     ];
@@ -49,6 +54,9 @@ export const viteConfig = {
     plugins: plugins(),
     server: {
         port: 1998,
+        fs: {
+            allow: [ui, root],
+        },
     },
     preview: {
         port: 1996,

package/dist/ui/sandbox-iframe.js

@@ -1 +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:{},highlightedSource:{},highlightedCssSource:{},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,"highlighted-source":n.highlightedSource,"highlighted-css-source":n.highlightedCssSource},n.passedProps),null,16,[`id`,`url`,`highlighted-source`,`highlighted-css-source`])):(s(),r(`iframe`,{key:1,src:f.value},null,8,d))}});export{f as default};
+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:{},highlightedSource:{},highlightedStylelessSource:{},highlightedCssSource:{},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,"highlighted-source":n.highlightedSource,"highlighted-css-source":n.highlightedCssSource,"highlighted-styleless-source":n.highlightedStylelessSource},n.passedProps),null,16,[`id`,`url`,`highlighted-source`,`highlighted-css-source`,`highlighted-styleless-source`])):(s(),r(`iframe`,{key:1,src:f.value},null,8,d))}});export{f as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "do11y",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "A bare-bones tool to document Vue components.",
   "keywords": [
     "docs-generator",
@@ -29,16 +29,12 @@
     "@mdit-vue/plugin-component": "^3.0.2",
     "@mdit-vue/plugin-frontmatter": "^3.0.2",
     "@mdit-vue/plugin-sfc": "^3.0.2",
-    "@shikijs/engine-oniguruma": "^3.22.0",
-    "@shikijs/langs": "^3.22.0",
-    "@shikijs/themes": "^3.22.0",
     "@shikijs/transformers": "^3.22.0",
     "@types/markdown-it": "^14.1.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",
     "shiki": "^3.22.0",
     "tinyglobby": "^0.2.15",
     "v-custom-block": "^1.0.67",

package/src/types.d.ts

@@ -48,3 +48,11 @@ declare module "*.vue?meta" {
 
   export default meta;
 }
+
+declare module "*.vue?highlight" {
+  import type { Meta } from "do11y";
+
+  const html: string;
+
+  export default html;
+}