@varlet/vite-plugins 2.6.0-alpha.1673285309604

package/LICENCE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 varlet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/html.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vite';
+export interface HtmlOptions {
+    data?: Record<string, string>;
+}
+export declare function html(options: HtmlOptions): Plugin;

package/lib/html.js

@@ -0,0 +1,12 @@
+import ejs from 'ejs';
+export function html(options) {
+    return {
+        name: 'vite-plugin-varlet-html',
+        transformIndexHtml: {
+            order: 'pre',
+            transform(html) {
+                return ejs.render(html, options.data);
+            },
+        },
+    };
+}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export * from './markdown.js';
+export * from './html.js';
+export * from './inlineCss.js';

package/lib/index.js

@@ -0,0 +1,3 @@
+export * from './markdown.js';
+export * from './html.js';
+export * from './inlineCss.js';

package/lib/inlineCss.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from 'vite';
+export interface InlineCssOptions {
+    cssFile: string;
+    jsFile: string;
+    onEnd?(): void;
+}
+export declare function inlineCss(options: InlineCssOptions): Plugin;

package/lib/inlineCss.js

@@ -0,0 +1,26 @@
+import fse from 'fs-extra';
+const { pathExistsSync, writeFileSync, readFileSync } = fse;
+export function inlineCss(options) {
+    return {
+        name: 'vite-plugin-varlet-inline-css',
+        apply: 'build',
+        closeBundle() {
+            const { cssFile, jsFile, onEnd } = options;
+            if (!pathExistsSync(cssFile)) {
+                this.error('css file cannot found');
+                return;
+            }
+            if (!pathExistsSync(jsFile)) {
+                this.error('js file cannot found');
+                return;
+            }
+            const cssCode = readFileSync(cssFile, 'utf-8');
+            const jsCode = readFileSync(jsFile, 'utf-8');
+            const injectCode = `;(function(){var style=document.createElement('style');style.type='text/css';\
+style.rel='stylesheet';style.appendChild(document.createTextNode(\`${cssCode.replace(/\\/g, '\\\\')}\`));\
+var head=document.querySelector('head');head.appendChild(style)})();`;
+            writeFileSync(jsFile, `${injectCode}${jsCode}`);
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+        },
+    };
+}

package/lib/markdown.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vite';
+export interface MarkdownOptions {
+    style?: string;
+}
+export declare function markdown(options: MarkdownOptions): Plugin;

package/lib/markdown.js

@@ -0,0 +1,110 @@
+import markdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+import { kebabCase } from '@varlet/shared';
+function htmlWrapper(html) {
+    const hGroup = html.replace(/<h3/g, ':::<h3').replace(/<h2/g, ':::<h2').split(':::');
+    const cardGroup = hGroup
+        .map((fragment) => (fragment.includes('<h3') ? `<div class="card">${fragment}</div>` : fragment))
+        .join('');
+    return cardGroup.replace(/<code>/g, '<code v-pre>');
+}
+function extractComponents(source) {
+    const componentRE = /import (.+) from ['"].+['"]/;
+    const importRE = /import .+ from ['"].+['"]/g;
+    const vueRE = /```vue((.|\r|\n)*?)```/g;
+    const imports = [];
+    const components = [];
+    source = source.replace(vueRE, (_, p1) => {
+        const partImports = p1.match(importRE);
+        const partComponents = partImports === null || partImports === void 0 ? void 0 : partImports.map((importer) => {
+            importer = importer.replace(/(\n|\r)/g, '');
+            const component = importer.replace(componentRE, '$1');
+            !imports.includes(importer) && imports.push(importer);
+            !components.includes(component) && components.push(component);
+            return `<${kebabCase(component)} />`;
+        });
+        return partComponents ? `<div class="varlet-component-preview">${partComponents.join('\n')}</div>` : '';
+    });
+    return {
+        imports,
+        components,
+        source,
+    };
+}
+function injectCodeExample(source) {
+    const codeRE = /(<pre class="hljs">(.|\r|\n)*?<\/pre>)/g;
+    return source.replace(codeRE, (str) => {
+        const flags = [
+            '// playground-ignore\n',
+            '<span class="hljs-meta">#</span><span class="bash"> playground-ignore</span>\n',
+            '<span class="hljs-comment">// playground-ignore</span>\n',
+            '<span class="hljs-comment">/* playground-ignore */</span>\n',
+            '<span class="hljs-comment">&lt;!-- playground-ignore --&gt;</span>\n',
+        ];
+        const attr = flags.some((flag) => str.includes(flag)) ? 'playground-ignore' : '';
+        str = flags.reduce((str, flag) => str.replace(flag, ''), str);
+        return `<var-site-code-example ${attr}>${str}</var-site-code-example>`;
+    });
+}
+function highlight(str, lang, style) {
+    let link = '';
+    if (style) {
+        link = '<link class="hljs-style" rel="stylesheet" href="' + style + '"/>';
+    }
+    if (lang && hljs.getLanguage(lang)) {
+        return ('<pre class="hljs"><code>' +
+            link +
+            hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+            '</code></pre>');
+    }
+    return '';
+}
+function markdownToVue(source, options) {
+    const { source: vueSource, imports, components } = extractComponents(source);
+    const md = markdownIt({
+        html: true,
+        highlight: (str, lang) => highlight(str, lang, options.style),
+    });
+    let templateString = htmlWrapper(md.render(vueSource));
+    templateString = templateString.replace(/process.env/g, '<span>process.env</span>');
+    templateString = injectCodeExample(templateString);
+    return `
+<template><div class="varlet-site-doc">${templateString}</div></template>
+
+<script>
+${imports.join('\n')}
+
+export default {
+  components: {
+    ${components.join(',')}
+  }
+}
+</script>
+  `;
+}
+export function markdown(options) {
+    return {
+        name: 'vite-plugin-varlet-markdown',
+        enforce: 'pre',
+        transform(source, id) {
+            if (!/\.md$/.test(id)) {
+                return;
+            }
+            try {
+                return markdownToVue(source, options);
+            }
+            catch (e) {
+                this.error(e);
+                return '';
+            }
+        },
+        async handleHotUpdate(ctx) {
+            if (!/\.md$/.test(ctx.file))
+                return;
+            const readSource = ctx.read;
+            ctx.read = async function () {
+                return markdownToVue(await readSource(), options);
+            };
+        },
+    };
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@varlet/vite-plugins",
+  "version": "2.6.0-alpha.1673285309604",
+  "type": "module",
+  "description": "vite plugins of varlet",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "keywords": [
+    "vite",
+    "plugins",
+    "varlet"
+  ],
+  "author": "haoziqaq <357229046@qq.com>",
+  "homepage": "https://github.com/varletjs/varlet#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/varletjs/varlet.git"
+  },
+  "bugs": {
+    "url": "https://github.com/varletjs/varlet/issues"
+  },
+  "dependencies": {
+    "ejs": "^3.1.8",
+    "fs-extra": "^9.0.1",
+    "highlight.js": "^10.7.2",
+    "markdown-it": "^12.2.3",
+    "@varlet/shared": "2.6.0-alpha.1673285309604"
+  },
+  "devDependencies": {
+    "vite": "^4.0.4",
+    "typescript": "^4.4.4",
+    "@types/node": "^18.7.20",
+    "@types/ejs": "^3.1.1",
+    "@types/markdown-it": "^12.2.3",
+    "@types/fs-extra": "^9.0.2"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc"
+  }
+}

package/src/html.ts

@@ -0,0 +1,20 @@
+import ejs from 'ejs'
+import type { Plugin } from 'vite'
+
+export interface HtmlOptions {
+  data?: Record<string, string>
+}
+
+export function html(options: HtmlOptions): Plugin {
+  return {
+    name: 'vite-plugin-varlet-html',
+
+    transformIndexHtml: {
+      order: 'pre',
+
+      transform(html) {
+        return ejs.render(html, options.data)
+      },
+    },
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './markdown.js'
+export * from './html.js'
+export * from './inlineCss.js'

package/src/inlineCss.ts

@@ -0,0 +1,41 @@
+import type { Plugin } from 'vite'
+import fse from 'fs-extra'
+
+const { pathExistsSync, writeFileSync, readFileSync } = fse
+
+export interface InlineCssOptions {
+  cssFile: string
+  jsFile: string
+  onEnd?(): void
+}
+
+export function inlineCss(options: InlineCssOptions): Plugin {
+  return {
+    name: 'vite-plugin-varlet-inline-css',
+
+    apply: 'build',
+
+    closeBundle() {
+      const { cssFile, jsFile, onEnd } = options
+
+      if (!pathExistsSync(cssFile)) {
+        this.error('css file cannot found')
+        return
+      }
+
+      if (!pathExistsSync(jsFile)) {
+        this.error('js file cannot found')
+        return
+      }
+
+      const cssCode = readFileSync(cssFile, 'utf-8')
+      const jsCode = readFileSync(jsFile, 'utf-8')
+      const injectCode = `;(function(){var style=document.createElement('style');style.type='text/css';\
+style.rel='stylesheet';style.appendChild(document.createTextNode(\`${cssCode.replace(/\\/g, '\\\\')}\`));\
+var head=document.querySelector('head');head.appendChild(style)})();`
+
+      writeFileSync(jsFile, `${injectCode}${jsCode}`)
+      onEnd?.()
+    },
+  }
+}

package/src/markdown.ts

@@ -0,0 +1,141 @@
+import markdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+import { kebabCase } from '@varlet/shared'
+import type { Plugin } from 'vite'
+
+function htmlWrapper(html: string) {
+  const hGroup = html.replace(/<h3/g, ':::<h3').replace(/<h2/g, ':::<h2').split(':::')
+
+  const cardGroup = hGroup
+    .map((fragment) => (fragment.includes('<h3') ? `<div class="card">${fragment}</div>` : fragment))
+    .join('')
+
+  return cardGroup.replace(/<code>/g, '<code v-pre>')
+}
+
+function extractComponents(source: string) {
+  const componentRE = /import (.+) from ['"].+['"]/
+  const importRE = /import .+ from ['"].+['"]/g
+  const vueRE = /```vue((.|\r|\n)*?)```/g
+  const imports: string[] = []
+  const components: string[] = []
+
+  source = source.replace(vueRE, (_, p1) => {
+    const partImports = p1.match(importRE)
+
+    const partComponents = partImports?.map((importer: string) => {
+      importer = importer.replace(/(\n|\r)/g, '')
+      const component = importer.replace(componentRE, '$1')
+      !imports.includes(importer) && imports.push(importer)
+      !components.includes(component) && components.push(component)
+
+      return `<${kebabCase(component)} />`
+    })
+
+    return partComponents ? `<div class="varlet-component-preview">${partComponents.join('\n')}</div>` : ''
+  })
+
+  return {
+    imports,
+    components,
+    source,
+  }
+}
+
+function injectCodeExample(source: string) {
+  const codeRE = /(<pre class="hljs">(.|\r|\n)*?<\/pre>)/g
+
+  return source.replace(codeRE, (str) => {
+    const flags = [
+      '// playground-ignore\n',
+      '<span class="hljs-meta">#</span><span class="bash"> playground-ignore</span>\n',
+      '<span class="hljs-comment">// playground-ignore</span>\n',
+      '<span class="hljs-comment">/* playground-ignore */</span>\n',
+      '<span class="hljs-comment">&lt;!-- playground-ignore --&gt;</span>\n',
+    ]
+
+    const attr = flags.some((flag) => str.includes(flag)) ? 'playground-ignore' : ''
+
+    str = flags.reduce((str, flag) => str.replace(flag, ''), str)
+
+    return `<var-site-code-example ${attr}>${str}</var-site-code-example>`
+  })
+}
+
+function highlight(str: string, lang: string, style?: string) {
+  let link = ''
+
+  if (style) {
+    link = '<link class="hljs-style" rel="stylesheet" href="' + style + '"/>'
+  }
+
+  if (lang && hljs.getLanguage(lang)) {
+    return (
+      '<pre class="hljs"><code>' +
+      link +
+      hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+      '</code></pre>'
+    )
+  }
+
+  return ''
+}
+
+function markdownToVue(source: string, options: MarkdownOptions) {
+  const { source: vueSource, imports, components } = extractComponents(source)
+  const md = markdownIt({
+    html: true,
+    highlight: (str, lang) => highlight(str, lang, options.style),
+  })
+  let templateString = htmlWrapper(md.render(vueSource))
+  templateString = templateString.replace(/process.env/g, '<span>process.env</span>')
+  templateString = injectCodeExample(templateString)
+
+  return `
+<template><div class="varlet-site-doc">${templateString}</div></template>
+
+<script>
+${imports.join('\n')}
+
+export default {
+  components: {
+    ${components.join(',')}
+  }
+}
+</script>
+  `
+}
+
+export interface MarkdownOptions {
+  style?: string
+}
+
+export function markdown(options: MarkdownOptions): Plugin {
+  return {
+    name: 'vite-plugin-varlet-markdown',
+
+    enforce: 'pre',
+
+    transform(source, id) {
+      if (!/\.md$/.test(id)) {
+        return
+      }
+
+      try {
+        return markdownToVue(source, options)
+      } catch (e: any) {
+        this.error(e)
+        return ''
+      }
+    },
+
+    async handleHotUpdate(ctx) {
+      if (!/\.md$/.test(ctx.file)) return
+
+      const readSource = ctx.read
+      ctx.read = async function () {
+        return markdownToVue(await readSource(), options)
+      }
+    },
+  }
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib"
+  },
+  "include": ["src/**/*"]
+}