vuepress-plugin-md-power 1.0.0-rc.80 → 1.0.0-rc.82

package/lib/shared/index.d.ts

@@ -1,10 +1,185 @@
-export * from './caniuse.js';
-export * from './pdf.js';
-export * from './icons.js';
-export * from './video.js';
-export * from './codepen.js';
-export * from './codeSandbox.js';
-export * from './replit.js';
-export * from './jsfiddle.js';
-export * from './plot.js';
-export * from './plugin.js';
+import { BuiltinTheme, ThemeRegistration } from 'shiki';
+
+type CanIUseMode = 'embed' | 'image';
+interface CanIUseTokenMeta {
+    feature: string;
+    mode: CanIUseMode;
+    versions: string;
+}
+interface CanIUseOptions {
+    /**
+     * 嵌入模式
+     *
+     * embed 通过iframe嵌入，提供可交互视图
+     *
+     * image 通过图片嵌入，静态
+     *
+     * @default 'embed'
+     */
+    mode?: CanIUseMode;
+}
+
+interface SizeOptions {
+    width?: string;
+    height?: string;
+    ratio?: number | string;
+}
+
+type PDFEmbedType = 'iframe' | 'embed' | 'pdfjs';
+interface PDFTokenMeta extends SizeOptions {
+    page?: number;
+    noToolbar?: boolean;
+    zoom?: number;
+    src?: string;
+    title?: string;
+}
+interface PDFOptions {
+    /**
+     * pdfjs url
+     */
+    pdfjsUrl?: string;
+}
+
+interface IconsOptions {
+    /**
+     * The prefix of the icon className
+     * @default 'vp-mdi'
+     */
+    prefix?: string;
+    /**
+     * The size of the icon
+     * @default '1em'
+     */
+    size?: string | number;
+    /**
+     * The color of the icon
+     * @default 'currentColor'
+     */
+    color?: string;
+}
+
+interface VideoOptions {
+    bilibili?: boolean;
+    youtube?: boolean;
+}
+interface BilibiliTokenMeta extends SizeOptions {
+    title?: string;
+    bvid?: string;
+    aid?: string;
+    cid?: string;
+    autoplay?: boolean;
+    time?: string | number;
+    page?: number;
+}
+interface YoutubeTokenMeta extends SizeOptions {
+    title?: string;
+    id: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    start?: string | number;
+    end?: string | number;
+}
+
+interface CodepenTokenMeta extends SizeOptions {
+    title?: string;
+    user?: string;
+    slash?: string;
+    tab?: string;
+    theme?: string;
+    preview?: boolean;
+    editable?: boolean;
+}
+
+interface CodeSandboxTokenMeta extends SizeOptions {
+    user?: string;
+    id?: string;
+    layout?: string;
+    type?: 'button' | 'embed';
+    title?: string;
+    filepath?: string;
+    navbar?: boolean;
+    console?: boolean;
+}
+
+type ThemeOptions = BuiltinTheme | {
+    light: BuiltinTheme;
+    dark: BuiltinTheme;
+};
+interface ReplOptions {
+    theme?: ThemeOptions;
+    go?: boolean;
+    kotlin?: boolean;
+    rust?: boolean;
+}
+interface ReplEditorData {
+    grammars: {
+        go?: any;
+        kotlin?: any;
+        rust?: any;
+    };
+    theme: ThemeRegistration | {
+        light: ThemeRegistration;
+        dark: ThemeRegistration;
+    };
+}
+
+interface ReplitTokenMeta extends SizeOptions {
+    title?: string;
+    source?: string;
+    theme?: string;
+}
+
+interface JSFiddleTokenMeta extends SizeOptions {
+    user?: string;
+    id?: string;
+    title?: string;
+    theme?: string;
+    tab?: string;
+}
+
+interface PlotOptions {
+    /**
+     * 是否启用 `=| |=`  markdown （该标记为非标准标记，脱离插件将不生效）
+     * @default true
+     */
+    tag?: boolean;
+    /**
+     * 遮罩层颜色
+     */
+    mask?: string | {
+        light: string;
+        dark: string;
+    };
+    /**
+     * 文本颜色
+     */
+    color?: string | {
+        light: string;
+        dark: string;
+    };
+    /**
+     * 触发方式
+     *
+     * @default 'hover'
+     */
+    trigger?: 'hover' | 'click';
+}
+
+interface MarkdownPowerPluginOptions {
+    pdf?: boolean | PDFOptions;
+    icons?: boolean | IconsOptions;
+    plot?: boolean | PlotOptions;
+    bilibili?: boolean;
+    youtube?: boolean;
+    codepen?: boolean;
+    /**
+     * @deprecated
+     */
+    replit?: boolean;
+    codeSandbox?: boolean;
+    jsfiddle?: boolean;
+    repl?: false | ReplOptions;
+    caniuse?: boolean | CanIUseOptions;
+}
+
+export type { BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodepenTokenMeta, IconsOptions, JSFiddleTokenMeta, MarkdownPowerPluginOptions, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta };

package/lib/shared/index.js

@@ -1,10 +0,0 @@
-export * from './caniuse.js';
-export * from './pdf.js';
-export * from './icons.js';
-export * from './video.js';
-export * from './codepen.js';
-export * from './codeSandbox.js';
-export * from './replit.js';
-export * from './jsfiddle.js';
-export * from './plot.js';
-export * from './plugin.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.80",
+  "version": "1.0.0-rc.82",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -41,18 +41,18 @@
   },
   "dependencies": {
     "@iconify/utils": "^2.1.25",
-    "@vuepress/helper": "2.0.0-rc.38",
+    "@vuepress/helper": "2.0.0-rc.39",
     "@vueuse/core": "^10.11.0",
     "local-pkg": "^0.5.0",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.0.7",
     "shiki": "^1.10.3",
-    "tm-grammars": "^1.13.11",
-    "tm-themes": "^1.5.3",
-    "vue": "^3.4.31"
+    "tm-grammars": "^1.13.13",
+    "tm-themes": "^1.5.5",
+    "vue": "^3.4.33"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.228",
+    "@iconify/json": "^2.2.229",
     "@types/markdown-it": "^14.1.1"
   },
   "publishConfig": {
@@ -65,9 +65,9 @@
     "vuepress-plugin-md-power"
   ],
   "scripts": {
-    "build": "pnpm run copy && pnpm run ts",
-    "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
+    "build": "pnpm copy && pnpm tsup",
+    "clean": "rimraf --glob ./lib",
     "copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
-    "ts": "tsc -b tsconfig.build.json"
+    "tsup": "tsup --config tsup.config.ts"
   }
 }

package/lib/node/features/caniuse.d.ts

@@ -1,25 +0,0 @@
-/**
- * @[caniuse embed{1,2,3,4}](feature_name)
- * @[caniuse image](feature_name)
- */
-import type { PluginWithOptions } from 'markdown-it';
-import type MarkdownIt from 'markdown-it';
-import type { CanIUseOptions } from '../../shared/index.js';
-/**
- * @example
- * ```md
- * @[caniuse](feature_name)
- * ```
- */
-export declare const caniusePlugin: PluginWithOptions<CanIUseOptions>;
-/**
- * @deprecated use caniuse plugin
- *
- * 兼容旧语法
- * @example
- * ```md
- * :::caniuse <feature_name>
- * :::
- * ```
- */
-export declare function legacyCaniuse(md: MarkdownIt, { mode }?: CanIUseOptions): void;

package/lib/node/features/caniuse.js

@@ -1,87 +0,0 @@
-import container from 'markdown-it-container';
-import { customAlphabet } from 'nanoid';
-import { createRuleBlock } from '../utils/createRuleBlock.js';
-const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 5);
-const UNDERLINE_RE = /_+/g;
-/**
- * @example
- * ```md
- * @[caniuse](feature_name)
- * ```
- */
-export const caniusePlugin = (md, { mode: defaultMode = 'embed' } = {}) => {
-    createRuleBlock(md, {
-        type: 'caniuse',
-        syntaxPattern: /^@\[caniuse(?:\s*?(embed|image)?(?:{([0-9,\-]*?)})?)\]\(([^)]*)\)/,
-        meta: ([, mode, versions = '', feature]) => ({
-            feature,
-            mode: mode || defaultMode,
-            versions,
-        }),
-        content: meta => resolveCanIUse(meta),
-    });
-};
-/**
- * @deprecated use caniuse plugin
- *
- * 兼容旧语法
- * @example
- * ```md
- * :::caniuse <feature_name>
- * :::
- * ```
- */
-export function legacyCaniuse(md, { mode = 'embed' } = {}) {
-    const modeMap = ['image', 'embed'];
-    const isMode = (mode) => modeMap.includes(mode);
-    mode = isMode(mode) ? mode : modeMap[0];
-    const type = 'caniuse';
-    const validateReg = new RegExp(`^${type}\\s+(.*)$`);
-    const validate = (info) => {
-        return validateReg.test(info.trim());
-    };
-    const render = (tokens, index) => {
-        const token = tokens[index];
-        if (token.nesting === 1) {
-            const info = token.info.trim().slice(type.length).trim() || '';
-            const feature = info.split(/\s+/)[0];
-            const versions = info.match(/\{(.*)\}/)?.[1] || '';
-            return feature ? resolveCanIUse({ feature, mode, versions }) : '';
-        }
-        else {
-            return '';
-        }
-    };
-    md.use(container, type, { validate, render });
-}
-function resolveCanIUse({ feature, mode, versions }) {
-    if (!feature)
-        return '';
-    if (mode === 'image') {
-        const link = 'https://caniuse.bitsofco.de/image/';
-        const alt = `Data on support for the ${feature} feature across the major browsers from caniuse.com`;
-        return `<ClientOnly><p><picture>
-      <source type="image/webp" srcset="${link}${feature}.webp">
-      <source type="image/png" srcset="${link}${feature}.png">
-      <img src="${link}${feature}.jpg" alt="${alt}" width="100%">
-    </picture></p></ClientOnly>`;
-    }
-    feature = feature.replace(UNDERLINE_RE, '_');
-    const { past, future } = resolveVersions(versions);
-    const meta = nanoid();
-    return `<CanIUseViewer feature="${feature}" meta="${meta}" past="${past}" future="${future}" />`;
-}
-function resolveVersions(versions) {
-    if (!versions)
-        return { past: 2, future: 1 };
-    const list = versions
-        .split(',')
-        .map(v => Number(v.trim()))
-        .filter(v => !Number.isNaN(v) && v >= -5 && v <= 3);
-    list.push(0);
-    const uniq = [...new Set(list)].sort((a, b) => b - a);
-    return {
-        future: uniq[0],
-        past: Math.abs(uniq[uniq.length - 1]),
-    };
-}

package/lib/node/features/codeSandbox.d.ts

@@ -1,7 +0,0 @@
-/**
- * @[codesandbox](id)
- * @[codesandbox share](user/id)
- * @[codesanbox title="xxx" layout="Editor+Preview" height="500px" navbar="false" console="false"](id#filepath)
- */
-import type { PluginWithOptions } from 'markdown-it';
-export declare const codeSandboxPlugin: PluginWithOptions<never>;

package/lib/node/features/codeSandbox.js

@@ -1,29 +0,0 @@
-import { resolveAttrs } from '../utils/resolveAttrs.js';
-import { parseRect } from '../utils/parseRect.js';
-import { createRuleBlock } from '../utils/createRuleBlock.js';
-export const codeSandboxPlugin = (md) => {
-    createRuleBlock(md, {
-        type: 'codesandbox',
-        syntaxPattern: /^@\[codesandbox(?:\s+(embed|button))?(?:\s+([^]*?))?\]\(([^)]*?)\)/,
-        meta([, type, info = '', source = '']) {
-            const { attrs } = resolveAttrs(info);
-            const [profile, filepath = ''] = source.split('#');
-            const [user, id] = profile.includes('/') ? profile.split('/') : ['', profile];
-            return {
-                width: attrs.width ? parseRect(attrs.width) : '100%',
-                height: attrs.height ? parseRect(attrs.height) : '500px',
-                user,
-                id,
-                title: attrs.title ?? '',
-                console: attrs.console ?? false,
-                navbar: attrs.navbar ?? true,
-                layout: attrs.layout ?? '',
-                type: (type || 'embed'),
-                filepath,
-            };
-        },
-        content({ title, height, width, user, id, type, filepath, console, navbar, layout }) {
-            return `<CodeSandboxViewer title="${title}" height="${height}" width="${width}" user="${user}" id="${id}" type="${type}" filepath="${filepath}" :console=${console} :navbar=${navbar} layout="${layout}" />`;
-        },
-    });
-};

package/lib/node/features/codepen.d.ts

@@ -1,7 +0,0 @@
-/**
- * @[codepen](user/slash)
- * @[codepen preview](user/slash)
- * @[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)
- */
-import type { PluginWithOptions } from 'markdown-it';
-export declare const codepenPlugin: PluginWithOptions<never>;

package/lib/node/features/codepen.js

@@ -1,42 +0,0 @@
-import { resolveAttrs } from '../utils/resolveAttrs.js';
-import { parseRect } from '../utils/parseRect.js';
-import { createRuleBlock } from '../utils/createRuleBlock.js';
-const CODEPEN_LINK = 'https://codepen.io/';
-export const codepenPlugin = (md) => {
-    createRuleBlock(md, {
-        type: 'codepen',
-        syntaxPattern: /^@\[codepen(?:\s+([^]*?))?\]\(([^)]*?)\)/,
-        meta: ([, info = '', source = '']) => {
-            const { attrs } = resolveAttrs(info);
-            const [user, slash] = source.split('/');
-            return {
-                width: attrs.width ? parseRect(attrs.width) : '100%',
-                height: attrs.height ? parseRect(attrs.height) : '400px',
-                user,
-                slash,
-                title: attrs.title,
-                preview: attrs.preview,
-                editable: attrs.editable,
-                tab: attrs.tab ?? 'result',
-                theme: attrs.theme,
-            };
-        },
-        content: (meta) => {
-            const { title = 'Codepen', height, width } = meta;
-            const params = new URLSearchParams();
-            if (meta.editable) {
-                params.set('editable', 'true');
-            }
-            if (meta.tab) {
-                params.set('default-tab', meta.tab);
-            }
-            if (meta.theme) {
-                params.set('theme-id', meta.theme);
-            }
-            const middle = meta.preview ? '/embed/preview/' : '/embed/';
-            const link = `${CODEPEN_LINK}${meta.user}${middle}${meta.slash}?${params.toString()}`;
-            const style = `width:${width};height:${height};margin:16px auto;border-radius:5px;`;
-            return `<iframe class="code-pen-iframe-wrapper" src="${link}" title="${title}" style="${style}" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">See the Pen <a href="${CODEPEN_LINK}${meta.user}/pen/${meta.slash}">${title}</a> by ${meta.user} (<a href="${CODEPEN_LINK}${meta.user}">@${meta.user}</a>) on <a href="${CODEPEN_LINK}">CodePen</a>.</iframe>`;
-        },
-    });
-};

package/lib/node/features/icons/index.d.ts

@@ -1,2 +0,0 @@
-export * from './writer.js';
-export * from './plugin.js';

package/lib/node/features/icons/index.js

@@ -1,2 +0,0 @@
-export * from './writer.js';
-export * from './plugin.js';

package/lib/node/features/icons/plugin.d.ts

@@ -1,10 +0,0 @@
-/**
- * :[mdi:11]:
- * :[mdi:11 24px]:
- * :[mid:11 /#ccc]:
- * :[fluent-mdl2:toggle-filled 128px/#fff]:
- */
-import type { PluginWithOptions } from 'markdown-it';
-type AddIcon = (iconName: string) => string | undefined;
-export declare const iconsPlugin: PluginWithOptions<AddIcon>;
-export {};

package/lib/node/features/icons/plugin.js

@@ -1,61 +0,0 @@
-import { parseRect } from '../../utils/parseRect.js';
-const [openTag, endTag] = [':[', ']:'];
-function createTokenizer(addIcon) {
-    return (state, silent) => {
-        let found = false;
-        const max = state.posMax;
-        const start = state.pos;
-        if (state.src.slice(start, start + 2) !== openTag)
-            return false;
-        if (silent)
-            return false;
-        // :[]:
-        if (max - start < 5)
-            return false;
-        state.pos = start + 2;
-        while (state.pos < max) {
-            if (state.src.slice(state.pos, state.pos + 2) === endTag) {
-                found = true;
-                break;
-            }
-            state.md.inline.skipToken(state);
-        }
-        if (!found || start + 2 === state.pos) {
-            state.pos = start;
-            return false;
-        }
-        const content = state.src.slice(start + 2, state.pos);
-        // 不允许前后带有空格
-        if (/^\s|\s$/.test(content)) {
-            state.pos = start;
-            return false;
-        }
-        // found!
-        state.posMax = state.pos;
-        state.pos = start + 2;
-        const [iconName, options = ''] = content.split(/\s+/);
-        const [size, color] = options.split('/');
-        const open = state.push('iconify_open', 'span', 1);
-        open.markup = openTag;
-        const className = addIcon(iconName);
-        if (className)
-            open.attrSet('class', className);
-        let style = '';
-        if (size)
-            style += `width:${parseRect(size)};height:${parseRect(size)};`;
-        if (color)
-            style += `color:${color};`;
-        if (style)
-            open.attrSet('style', style);
-        const text = state.push('text', '', 0);
-        text.content = className ? '' : iconName;
-        const close = state.push('iconify_close', 'span', -1);
-        close.markup = endTag;
-        state.pos = state.posMax + 2;
-        state.posMax = max;
-        return true;
-    };
-}
-export const iconsPlugin = (md, addIcon = () => '') => {
-    md.inline.ruler.before('emphasis', 'iconify', createTokenizer(addIcon));
-};

package/lib/node/features/icons/writer.d.ts

@@ -1,11 +0,0 @@
-import type { App } from 'vuepress/core';
-import type { IconsOptions } from '../../../shared/icons.js';
-export interface IconCacheItem {
-    className: string;
-    content: string;
-}
-export declare function createIconCSSWriter(app: App, opt?: boolean | IconsOptions): {
-    addIcon: (iconName: string) => string | undefined;
-    writeCss: () => Promise<void>;
-    initIcon: () => Promise<void>;
-};

package/lib/node/features/icons/writer.js

@@ -1,126 +0,0 @@
-import { constants, promises as fsp } from 'node:fs';
-import { getIconContentCSS, getIconData } from '@iconify/utils';
-import { fs, logger } from 'vuepress/utils';
-import { isPackageExists } from 'local-pkg';
-import { customAlphabet } from 'nanoid';
-import { interopDefault } from '../../utils/package.js';
-import { parseRect } from '../../utils/parseRect.js';
-const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', 8);
-const iconDataCache = new Map();
-const URL_CONTENT_RE = /(url\([^]+?\))/;
-const CSS_PATH = 'internal/md-power/icons.css';
-function resolveOption(opt) {
-    const options = typeof opt === 'object' ? opt : {};
-    options.prefix ??= 'vp-mdi';
-    options.color = options.color === 'currentColor' || !options.color ? 'currentcolor' : options.color;
-    options.size = options.size ? parseRect(`${options.size}`) : '1em';
-    return options;
-}
-export function createIconCSSWriter(app, opt) {
-    const cache = new Map();
-    const isInstalled = isPackageExists('@iconify/json');
-    const currentPath = app.dir.temp(CSS_PATH);
-    const write = async (content) => {
-        if (!content && app.env.isDev) {
-            if (existsSync(currentPath) && (await fsp.stat(currentPath)).isFile()) {
-                return;
-            }
-        }
-        await app.writeTemp(CSS_PATH, content);
-    };
-    let timer = null;
-    const options = resolveOption(opt);
-    const prefix = options.prefix;
-    const defaultContent = getDefaultContent(options);
-    async function writeCss() {
-        if (timer)
-            clearTimeout(timer);
-        timer = setTimeout(async () => {
-            let css = defaultContent;
-            if (cache.size > 0) {
-                for (const [, { content, className }] of cache)
-                    css += `.${className} {\n  --svg: ${content};\n}\n`;
-                await write(css);
-            }
-        }, 100);
-    }
-    function addIcon(iconName) {
-        if (!isInstalled)
-            return;
-        if (cache.has(iconName))
-            return cache.get(iconName).className;
-        const item = {
-            className: `${prefix}-${nanoid()}`,
-            content: '',
-        };
-        cache.set(iconName, item);
-        genIconContent(iconName, (content) => {
-            item.content = content;
-            writeCss();
-        });
-        return item.className;
-    }
-    async function initIcon() {
-        if (!opt)
-            return await write('');
-        if (!isInstalled) {
-            logger.error('[plugin-md-power]: `@iconify/json` not found! Please install `@iconify/json` first.');
-            return;
-        }
-        return await writeCss();
-    }
-    return { addIcon, writeCss, initIcon };
-}
-function getDefaultContent(options) {
-    const { prefix, size, color } = options;
-    return `[class^="${prefix}-"],
-[class*=" ${prefix}-"] {
-  display: inline-block;
-  width: ${size};
-  height: ${size};
-  vertical-align: middle;
-  color: inherit;
-  background-color: ${color};
-  -webkit-mask: var(--svg) no-repeat;
-  mask: var(--svg) no-repeat;
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-}
-`;
-}
-let locate;
-async function genIconContent(iconName, cb) {
-    if (!locate) {
-        const mod = await interopDefault(import('@iconify/json'));
-        locate = mod.locate;
-    }
-    const [collect, name] = iconName.split(':');
-    let iconJson = iconDataCache.get(collect);
-    if (!iconJson) {
-        const filename = locate(collect);
-        try {
-            iconJson = JSON.parse(await fs.readFile(filename, 'utf-8'));
-            iconDataCache.set(collect, iconJson);
-        }
-        catch {
-            logger.warn(`[plugin-md-power] Can not find icon, ${collect} is missing!`);
-        }
-    }
-    const data = getIconData(iconJson, name);
-    if (!data)
-        return logger.error(`[plugin-md-power] Can not read icon in ${collect}, ${name} is missing!`);
-    const content = getIconContentCSS(data, {
-        height: data.height || 24,
-    });
-    const match = content.match(URL_CONTENT_RE);
-    return cb(match ? match[1] : '');
-}
-function existsSync(fp) {
-    try {
-        fs.accessSync(fp, constants.R_OK);
-        return true;
-    }
-    catch {
-        return false;
-    }
-}

package/lib/node/features/jsfiddle.d.ts

@@ -1,6 +0,0 @@
-/**
- * @[jsfiddle](user/id)
- * @[jsfiddle theme="dark" tab="js,css,html,result"](user/id)
- */
-import type { PluginWithOptions } from 'markdown-it';
-export declare const jsfiddlePlugin: PluginWithOptions<never>;