@varlet/vite-plugins 3.14.1 → 3.15.0-alpha.1776572752298
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.d.ts +19 -15
- package/lib/index.js +129 -144
- package/package.json +8 -8
package/lib/index.d.ts
CHANGED
|
@@ -1,30 +1,34 @@
|
|
|
1
|
-
import { Plugin } from
|
|
1
|
+
import { Plugin } from "vite";
|
|
2
2
|
|
|
3
|
+
//#region src/markdown.d.ts
|
|
3
4
|
interface MarkdownOptions {
|
|
4
|
-
|
|
5
|
+
style?: string;
|
|
5
6
|
}
|
|
6
7
|
declare function markdown(options: MarkdownOptions): Plugin;
|
|
7
|
-
|
|
8
|
+
//#endregion
|
|
9
|
+
//#region src/html.d.ts
|
|
8
10
|
interface HtmlOptions {
|
|
9
|
-
|
|
11
|
+
data?: Record<string, string | string[] | Record<string, any>>;
|
|
10
12
|
}
|
|
11
13
|
declare function html(options: HtmlOptions): Plugin;
|
|
12
|
-
|
|
14
|
+
//#endregion
|
|
15
|
+
//#region src/inlineCss.d.ts
|
|
13
16
|
interface InlineCssOptions {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
cssFile: string;
|
|
18
|
+
jsFile: string;
|
|
19
|
+
onEnd?(): void;
|
|
17
20
|
}
|
|
18
21
|
declare function inlineCss(options: InlineCssOptions): Plugin;
|
|
19
|
-
|
|
22
|
+
//#endregion
|
|
23
|
+
//#region src/copy.d.ts
|
|
20
24
|
interface CopyPath {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
from: string;
|
|
26
|
+
to: string;
|
|
27
|
+
type: 'folder' | 'file';
|
|
24
28
|
}
|
|
25
29
|
interface CopyOptions {
|
|
26
|
-
|
|
30
|
+
paths: CopyPath[];
|
|
27
31
|
}
|
|
28
32
|
declare function copy(options: CopyOptions): Plugin;
|
|
29
|
-
|
|
30
|
-
export { CopyOptions, CopyPath, HtmlOptions, InlineCssOptions, MarkdownOptions, copy, html, inlineCss, markdown };
|
|
33
|
+
//#endregion
|
|
34
|
+
export { CopyOptions, CopyPath, HtmlOptions, InlineCssOptions, MarkdownOptions, copy, html, inlineCss, markdown };
|
package/lib/index.js
CHANGED
|
@@ -1,79 +1,75 @@
|
|
|
1
|
-
// src/markdown.ts
|
|
2
1
|
import { kebabCase } from "@varlet/shared";
|
|
3
2
|
import hljs from "highlight.js";
|
|
4
3
|
import markdownIt from "markdown-it";
|
|
5
4
|
import { pinyin } from "pinyin-pro";
|
|
6
|
-
|
|
5
|
+
import ejs from "ejs";
|
|
6
|
+
import fse from "fs-extra";
|
|
7
|
+
//#region src/markdown.ts
|
|
8
|
+
const includeChinese = (value) => /[\u4e00-\u9fa5]/.test(value);
|
|
7
9
|
function transformHash(hash) {
|
|
8
|
-
|
|
10
|
+
return (includeChinese(hash) ? pinyin(hash, { toneType: "num" }) : hash).replaceAll(" ", "");
|
|
9
11
|
}
|
|
10
|
-
function htmlWrapper(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const cardGroup = hGroup.map((fragment) => fragment.includes("<h3") ? `<div class="card">${fragment}</div>` : fragment).join("");
|
|
17
|
-
return cardGroup.replace(/<code>/g, "<code v-pre>");
|
|
12
|
+
function htmlWrapper(html) {
|
|
13
|
+
const matches = html.matchAll(/<h3>(.*?)<\/h3>/g);
|
|
14
|
+
return html.replace(/<h3>/g, () => {
|
|
15
|
+
const hash = transformHash(matches.next().value[1]);
|
|
16
|
+
return `:::<h3 id="${hash}"><router-link to="#${hash}">#</router-link>`;
|
|
17
|
+
}).replace(/<h2/g, ":::<h2").split(":::").map((fragment) => fragment.includes("<h3") ? `<div class="card">${fragment}</div>` : fragment).join("").replace(/<code>/g, "<code v-pre>");
|
|
18
18
|
}
|
|
19
19
|
function extractComponents(source) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
};
|
|
20
|
+
const componentRE = /import (.+) from ['"].+['"]/;
|
|
21
|
+
const importRE = /import .+ from ['"].+['"]/g;
|
|
22
|
+
const vueRE = /```vue((.|\r|\n)*?)```/g;
|
|
23
|
+
const imports = [];
|
|
24
|
+
const components = [];
|
|
25
|
+
source = source.replace(vueRE, (_, p1) => {
|
|
26
|
+
const partComponents = p1.match(importRE)?.map((importer) => {
|
|
27
|
+
importer = importer.replace(/(\n|\r)/g, "");
|
|
28
|
+
const component = importer.replace(componentRE, "$1");
|
|
29
|
+
!imports.includes(importer) && imports.push(importer);
|
|
30
|
+
!components.includes(component) && components.push(component);
|
|
31
|
+
return `<${kebabCase(component)} />`;
|
|
32
|
+
});
|
|
33
|
+
return partComponents ? `<div class="varlet-component-preview">${partComponents.join("\n")}</div>` : "";
|
|
34
|
+
});
|
|
35
|
+
return {
|
|
36
|
+
imports,
|
|
37
|
+
components,
|
|
38
|
+
source
|
|
39
|
+
};
|
|
41
40
|
}
|
|
42
41
|
function injectCodeExample(source) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
});
|
|
42
|
+
return source.replace(/(<pre class="hljs">(.|\r|\n)*?<\/pre>)/g, (str) => {
|
|
43
|
+
const flags = [
|
|
44
|
+
"// playground-ignore\n",
|
|
45
|
+
"<span class=\"hljs-meta\">#</span><span class=\"bash\"> playground-ignore</span>\n",
|
|
46
|
+
"<span class=\"hljs-comment\">// playground-ignore</span>\n",
|
|
47
|
+
"<span class=\"hljs-comment\">/* playground-ignore */</span>\n",
|
|
48
|
+
"<span class=\"hljs-comment\"><!-- playground-ignore --></span>\n"
|
|
49
|
+
];
|
|
50
|
+
const attr = flags.some((flag) => str.includes(flag)) ? "playground-ignore" : "";
|
|
51
|
+
str = flags.reduce((str, flag) => str.replace(flag, ""), str);
|
|
52
|
+
return `<var-site-code-example ${attr}>${str}</var-site-code-example>`;
|
|
53
|
+
});
|
|
56
54
|
}
|
|
57
55
|
function highlight(str, lang, style) {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
return "";
|
|
56
|
+
let link = "";
|
|
57
|
+
if (style) link = "<link class=\"hljs-style\" rel=\"stylesheet\" href=\"" + style + "\"/>";
|
|
58
|
+
if (lang && hljs.getLanguage(lang)) return "<pre class=\"hljs\"><code>" + link + hljs.highlight(str, {
|
|
59
|
+
language: lang,
|
|
60
|
+
ignoreIllegals: true
|
|
61
|
+
}).value + "</code></pre>";
|
|
62
|
+
return "";
|
|
66
63
|
}
|
|
67
64
|
function markdownToVue(source, options) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
return `
|
|
65
|
+
const { source: vueSource, imports, components } = extractComponents(source);
|
|
66
|
+
let templateString = htmlWrapper(markdownIt({
|
|
67
|
+
html: true,
|
|
68
|
+
highlight: (str, lang) => highlight(str, lang, options.style)
|
|
69
|
+
}).render(vueSource));
|
|
70
|
+
templateString = templateString.replace(/process.env/g, "<span>process.env</span>");
|
|
71
|
+
templateString = injectCodeExample(templateString);
|
|
72
|
+
return `
|
|
77
73
|
<template><div class="varlet-site-doc">${templateString}</div></template>
|
|
78
74
|
|
|
79
75
|
<script>
|
|
@@ -84,95 +80,84 @@ export default {
|
|
|
84
80
|
${components.join(",")}
|
|
85
81
|
}
|
|
86
82
|
}
|
|
87
|
-
|
|
83
|
+
<\/script>
|
|
88
84
|
`;
|
|
89
85
|
}
|
|
90
86
|
function markdown(options) {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
const { read } = ctx;
|
|
109
|
-
ctx.read = async () => markdownToVue(await read(), options);
|
|
110
|
-
}
|
|
111
|
-
};
|
|
87
|
+
return {
|
|
88
|
+
name: "vite-plugin-varlet-markdown",
|
|
89
|
+
enforce: "pre",
|
|
90
|
+
transform(source, id) {
|
|
91
|
+
if (!/\.md$/.test(id)) return;
|
|
92
|
+
try {
|
|
93
|
+
return markdownToVue(source, options);
|
|
94
|
+
} catch (e) {
|
|
95
|
+
this.error(e);
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
handleHotUpdate(ctx) {
|
|
99
|
+
if (!/\.md$/.test(ctx.file)) return;
|
|
100
|
+
const { read } = ctx;
|
|
101
|
+
ctx.read = async () => markdownToVue(await read(), options);
|
|
102
|
+
}
|
|
103
|
+
};
|
|
112
104
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
import ejs from "ejs";
|
|
105
|
+
//#endregion
|
|
106
|
+
//#region src/html.ts
|
|
116
107
|
function html(options) {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
108
|
+
return {
|
|
109
|
+
name: "vite-plugin-varlet-html",
|
|
110
|
+
transformIndexHtml: {
|
|
111
|
+
order: "pre",
|
|
112
|
+
handler(html) {
|
|
113
|
+
return ejs.render(html, options.data);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
};
|
|
126
117
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
var { pathExistsSync, writeFileSync, readFileSync, removeSync } = fse;
|
|
118
|
+
//#endregion
|
|
119
|
+
//#region src/inlineCss.ts
|
|
120
|
+
const { pathExistsSync, writeFileSync, readFileSync, removeSync } = fse;
|
|
131
121
|
function inlineCss(options) {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
122
|
+
return {
|
|
123
|
+
name: "vite-plugin-varlet-inline-css",
|
|
124
|
+
apply: "build",
|
|
125
|
+
closeBundle() {
|
|
126
|
+
const { cssFile, jsFile, onEnd } = options;
|
|
127
|
+
if (!pathExistsSync(cssFile)) {
|
|
128
|
+
this.warn("css file cannot found");
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
if (!pathExistsSync(jsFile)) {
|
|
132
|
+
this.warn("js file cannot found");
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
const cssCode = readFileSync(cssFile, "utf-8");
|
|
136
|
+
const jsCode = readFileSync(jsFile, "utf-8");
|
|
137
|
+
writeFileSync(jsFile, `${`;(function(){var style=document.createElement('style');style.type='text/css';\
|
|
138
|
+
style.rel='stylesheet';style.appendChild(document.createTextNode(\`${cssCode.replace(/\\/g, "\\\\")}\`));\
|
|
139
|
+
var head=document.querySelector('head');head.appendChild(style)})();`}${jsCode}`);
|
|
140
|
+
removeSync(cssFile);
|
|
141
|
+
onEnd?.();
|
|
142
|
+
}
|
|
143
|
+
};
|
|
153
144
|
}
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
var { copySync, copyFileSync } = fse2;
|
|
145
|
+
//#endregion
|
|
146
|
+
//#region src/copy.ts
|
|
147
|
+
const { copySync, copyFileSync } = fse;
|
|
158
148
|
function copy(options) {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
};
|
|
149
|
+
return {
|
|
150
|
+
name: "vite-plugin-varlet-copy",
|
|
151
|
+
buildStart() {
|
|
152
|
+
options.paths.forEach((copyPath) => {
|
|
153
|
+
try {
|
|
154
|
+
(copyPath.type === "folder" ? copySync : copyFileSync)(copyPath.from, copyPath.to);
|
|
155
|
+
} catch (e) {
|
|
156
|
+
this.warn(e);
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
};
|
|
172
161
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
html,
|
|
176
|
-
inlineCss,
|
|
177
|
-
markdown
|
|
178
|
-
};
|
|
162
|
+
//#endregion
|
|
163
|
+
export { copy, html, inlineCss, markdown };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@varlet/vite-plugins",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.15.0-alpha.1776572752298",
|
|
4
4
|
"description": "vite plugins of varlet",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vite",
|
|
@@ -29,21 +29,21 @@
|
|
|
29
29
|
"highlight.js": "^10.7.2",
|
|
30
30
|
"markdown-it": "^12.2.3",
|
|
31
31
|
"pinyin-pro": "3.17.0",
|
|
32
|
-
"@varlet/shared": "3.
|
|
32
|
+
"@varlet/shared": "3.15.0-alpha.1776572752298"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/ejs": "^3.1.1",
|
|
36
36
|
"@types/fs-extra": "^9.0.2",
|
|
37
37
|
"@types/markdown-it": "^12.2.3",
|
|
38
|
-
"@types/node": "^
|
|
39
|
-
"
|
|
40
|
-
"
|
|
38
|
+
"@types/node": "^20.19.0",
|
|
39
|
+
"typescript": "5.6.3",
|
|
40
|
+
"vite-plus": "0.1.18"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"vite": "
|
|
43
|
+
"vite": "npm:@voidzero-dev/vite-plus-core@0.1.18"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
|
-
"build": "
|
|
47
|
-
"dev": "
|
|
46
|
+
"build": "vp pack",
|
|
47
|
+
"dev": "vp pack --watch"
|
|
48
48
|
}
|
|
49
49
|
}
|