do11y 0.2.10 → 0.2.12

package/README.md

@@ -84,16 +84,49 @@ interface Options {
   /**
    * 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
    * to switch between them, e.g. `data-theme="vitesse-light"`.
    */
   highlighter?: {
+    /**
+     * The available themes.
+     * The default shiki themes are always included.
+     */
     themes: (ThemeInput | StringLiteralUnion<BundledTheme, string>)[];
+
+    /**
+     * What the default theme should be.
+     * @default "The first theme in the array"
+     */
     defaultTheme?: string | StringLiteralUnion<BundledTheme, string>;
+
+    /**
+     * Custom transformers.
+     *
+     * These Shiki's default transformers are always included:
+     *   - transformerNotationHighlight
+     *   - transformerNotationDiff
+     *   - transformerNotationErrorLevel
+     */
     transformers?: ShikiTransformer[];
+
+    /**
+     * If comments should be filtered.
+     *   - Passing `true` removes all comments
+     *   - While `string[]` acts as a filter - removing comments that `include` any of these strings in them
+     *   - `false` keeps all comments
+     *
+     * @default ["prettier-ignore"]
+     */
+    removeComments?: boolean | string[];
+
+    /**
+     * If any postprocessing should be done.
+     * The element is a JSDOM HTMLPreElement.
+     */
     postprocess?: (pre: HTMLPreElement) => void;
   };
 

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,8 @@ const resolveOptions = async () => {
             themes: options.highlighter?.themes ?? [],
             themesInput,
             transformers: options.highlighter?.transformers || [],
+            postprocess: options.highlighter?.postprocess,
+            removeComments: options.highlighter?.removeComments ?? ["prettier-ignore"],
         },
     };
 };

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

@@ -30,6 +30,52 @@ export const highlightCode = (code, lang) => {
                     }
                 },
             },
+            {
+                name: "remove-unwanted-comments",
+                tokens(tokens) {
+                    const filter = do11yOptions.highlighter.removeComments;
+                    if (filter === false) {
+                        return tokens;
+                    }
+                    const result = [];
+                    let previousLineWasRemoved = false;
+                    for (const line of tokens) {
+                        previousLineWasRemoved = false;
+                        const filteredLine = [];
+                        let hasComment = false;
+                        for (const token of line) {
+                            const isUnwantedComment = token.explanation?.some((exp) => {
+                                const isComment = exp.scopes.some((s) => s.scopeName.startsWith("comment"));
+                                if (!isComment) {
+                                    return false;
+                                }
+                                return typeof filter === "boolean"
+                                    ? true
+                                    : filter.some((query) => exp.content.includes(query));
+                            });
+                            if (isUnwantedComment) {
+                                hasComment = true;
+                            }
+                            else {
+                                filteredLine.push(token);
+                            }
+                        }
+                        /**
+                         * Remove lines that become empty after removing comments.
+                         * Additionally, if the next line after a removed comment line is empty too - remove it.
+                         */
+                        if (hasComment || previousLineWasRemoved) {
+                            const isAllWhitespace = filteredLine.every((token) => !token.content.trim());
+                            previousLineWasRemoved = isAllWhitespace;
+                            if (isAllWhitespace) {
+                                continue;
+                            }
+                        }
+                        result.push(filteredLine);
+                    }
+                    return result;
+                },
+            },
         ],
     });
 };
@@ -48,9 +94,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.
@@ -70,7 +128,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,16 +31,45 @@ 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
      * to switch between them, e.g. `data-theme="vitesse-light"`.
      */
     highlighter?: {
+        /**
+         * The available themes.
+         * The default shiki themes are always included.
+         */
         themes: (ThemeInput | StringLiteralUnion<BundledTheme, string>)[];
+        /**
+         * What the default theme should be.
+         * @default "The first theme in the array"
+         */
         defaultTheme?: string | StringLiteralUnion<BundledTheme, string>;
+        /**
+         * Custom transformers.
+         *
+         * These Shiki's default transformers are always included:
+         *   - transformerNotationHighlight
+         *   - transformerNotationDiff
+         *   - transformerNotationErrorLevel
+         */
         transformers?: ShikiTransformer[];
+        /**
+         * If comments should be filtered.
+         *   - Passing `true` removes all comments
+         *   - While `string[]` acts as a filter - removing comments that `include` any of these strings in them
+         *   - `false` keeps all comments
+         *
+         * @default ["prettier-ignore"]
+         */
+        removeComments?: boolean | string[];
+        /**
+         * If any postprocessing should be done.
+         * The element is a JSDOM HTMLPreElement.
+         */
         postprocess?: (pre: HTMLPreElement) => void;
     };
 }
@@ -50,6 +79,7 @@ export interface ResolvedOptions extends Omit<Options, "highlighter"> {
         themesInput: Record<string, string>;
         defaultTheme: string;
         transformers: ShikiTransformer[];
+        removeComments: boolean | string[];
         postprocess?: (pre: HTMLPreElement) => void;
     };
 }

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.10",
+  "version": "0.2.12",
   "description": "A bare-bones tool to document Vue components.",
   "keywords": [
     "docs-generator",