@varlet/vite-plugins 2.16.2 → 2.16.3-alpha.1694361535255

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.
Files changed (12) hide show
  1. package/lib/index.d.ts +30 -4
  2. package/lib/index.js +177 -4
  3. package/package.json +5 -5
  4. package/tsconfig.json +1 -0
  5. package/lib/copy.d.ts +0 -10
  6. package/lib/copy.js +0 -18
  7. package/lib/html.d.ts +0 -5
  8. package/lib/html.js +0 -12
  9. package/lib/inlineCss.d.ts +0 -7
  10. package/lib/inlineCss.js +0 -29
  11. package/lib/markdown.d.ts +0 -5
  12. package/lib/markdown.js +0 -117
package/lib/index.d.ts CHANGED
@@ -1,4 +1,30 @@
1
- export * from './markdown.js';
2
- export * from './html.js';
3
- export * from './inlineCss.js';
4
- export * from './copy.js';
1
+ import { Plugin } from 'vite';
2
+
3
+ interface MarkdownOptions {
4
+ style?: string;
5
+ }
6
+ declare function markdown(options: MarkdownOptions): Plugin;
7
+
8
+ interface HtmlOptions {
9
+ data?: Record<string, string>;
10
+ }
11
+ declare function html(options: HtmlOptions): Plugin;
12
+
13
+ interface InlineCssOptions {
14
+ cssFile: string;
15
+ jsFile: string;
16
+ onEnd?(): void;
17
+ }
18
+ declare function inlineCss(options: InlineCssOptions): Plugin;
19
+
20
+ interface CopyPath {
21
+ from: string;
22
+ to: string;
23
+ type: 'folder' | 'file';
24
+ }
25
+ interface CopyOptions {
26
+ paths: CopyPath[];
27
+ }
28
+ declare function copy(options: CopyOptions): Plugin;
29
+
30
+ export { CopyOptions, CopyPath, HtmlOptions, InlineCssOptions, MarkdownOptions, copy, html, inlineCss, markdown };
package/lib/index.js CHANGED
@@ -1,4 +1,177 @@
1
- export * from './markdown.js';
2
- export * from './html.js';
3
- export * from './inlineCss.js';
4
- export * from './copy.js';
1
+ // src/markdown.ts
2
+ import markdownIt from "markdown-it";
3
+ import hljs from "highlight.js";
4
+ import { kebabCase } from "@varlet/shared";
5
+ function htmlWrapper(html2) {
6
+ const matches = html2.matchAll(/<h3>(.*?)<\/h3>/g);
7
+ const hGroup = html2.replace(/<h3>/g, () => {
8
+ const content = matches.next().value[1];
9
+ return `:::<h3 id="${content}"><router-link to="#${content}">#</router-link>`;
10
+ }).replace(/<h2/g, ":::<h2").split(":::");
11
+ const cardGroup = hGroup.map((fragment) => fragment.includes("<h3") ? `<div class="card">${fragment}</div>` : fragment).join("");
12
+ return cardGroup.replace(/<code>/g, "<code v-pre>");
13
+ }
14
+ function extractComponents(source) {
15
+ const componentRE = /import (.+) from ['"].+['"]/;
16
+ const importRE = /import .+ from ['"].+['"]/g;
17
+ const vueRE = /```vue((.|\r|\n)*?)```/g;
18
+ const imports = [];
19
+ const components = [];
20
+ source = source.replace(vueRE, (_, p1) => {
21
+ const partImports = p1.match(importRE);
22
+ const partComponents = partImports?.map((importer) => {
23
+ importer = importer.replace(/(\n|\r)/g, "");
24
+ const component = importer.replace(componentRE, "$1");
25
+ !imports.includes(importer) && imports.push(importer);
26
+ !components.includes(component) && components.push(component);
27
+ return `<${kebabCase(component)} />`;
28
+ });
29
+ return partComponents ? `<div class="varlet-component-preview">${partComponents.join("\n")}</div>` : "";
30
+ });
31
+ return {
32
+ imports,
33
+ components,
34
+ source
35
+ };
36
+ }
37
+ function injectCodeExample(source) {
38
+ const codeRE = /(<pre class="hljs">(.|\r|\n)*?<\/pre>)/g;
39
+ return source.replace(codeRE, (str) => {
40
+ const flags = [
41
+ "// playground-ignore\n",
42
+ '<span class="hljs-meta">#</span><span class="bash"> playground-ignore</span>\n',
43
+ '<span class="hljs-comment">// playground-ignore</span>\n',
44
+ '<span class="hljs-comment">/* playground-ignore */</span>\n',
45
+ '<span class="hljs-comment">&lt;!-- playground-ignore --&gt;</span>\n'
46
+ ];
47
+ const attr = flags.some((flag) => str.includes(flag)) ? "playground-ignore" : "";
48
+ str = flags.reduce((str2, flag) => str2.replace(flag, ""), str);
49
+ return `<var-site-code-example ${attr}>${str}</var-site-code-example>`;
50
+ });
51
+ }
52
+ function highlight(str, lang, style) {
53
+ let link = "";
54
+ if (style) {
55
+ link = '<link class="hljs-style" rel="stylesheet" href="' + style + '"/>';
56
+ }
57
+ if (lang && hljs.getLanguage(lang)) {
58
+ return '<pre class="hljs"><code>' + link + hljs.highlight(str, { language: lang, ignoreIllegals: true }).value + "</code></pre>";
59
+ }
60
+ return "";
61
+ }
62
+ function markdownToVue(source, options) {
63
+ const { source: vueSource, imports, components } = extractComponents(source);
64
+ const md = markdownIt({
65
+ html: true,
66
+ highlight: (str, lang) => highlight(str, lang, options.style)
67
+ });
68
+ let templateString = htmlWrapper(md.render(vueSource));
69
+ templateString = templateString.replace(/process.env/g, "<span>process.env</span>");
70
+ templateString = injectCodeExample(templateString);
71
+ return `
72
+ <template><div class="varlet-site-doc">${templateString}</div></template>
73
+
74
+ <script>
75
+ ${imports.join("\n")}
76
+
77
+ export default {
78
+ components: {
79
+ ${components.join(",")}
80
+ }
81
+ }
82
+ </script>
83
+ `;
84
+ }
85
+ function markdown(options) {
86
+ return {
87
+ name: "vite-plugin-varlet-markdown",
88
+ enforce: "pre",
89
+ transform(source, id) {
90
+ if (!/\.md$/.test(id)) {
91
+ return;
92
+ }
93
+ try {
94
+ return markdownToVue(source, options);
95
+ } catch (e) {
96
+ this.error(e);
97
+ return "";
98
+ }
99
+ },
100
+ async handleHotUpdate(ctx) {
101
+ if (!/\.md$/.test(ctx.file))
102
+ return;
103
+ const readSource = ctx.read;
104
+ ctx.read = async function() {
105
+ return markdownToVue(await readSource(), options);
106
+ };
107
+ }
108
+ };
109
+ }
110
+
111
+ // src/html.ts
112
+ import ejs from "ejs";
113
+ function html(options) {
114
+ return {
115
+ name: "vite-plugin-varlet-html",
116
+ transformIndexHtml: {
117
+ order: "pre",
118
+ transform(html2) {
119
+ return ejs.render(html2, options.data);
120
+ }
121
+ }
122
+ };
123
+ }
124
+
125
+ // src/inlineCss.ts
126
+ import fse from "fs-extra";
127
+ var { pathExistsSync, writeFileSync, readFileSync, removeSync } = fse;
128
+ function inlineCss(options) {
129
+ return {
130
+ name: "vite-plugin-varlet-inline-css",
131
+ apply: "build",
132
+ closeBundle() {
133
+ const { cssFile, jsFile, onEnd } = options;
134
+ if (!pathExistsSync(cssFile)) {
135
+ this.warn("css file cannot found");
136
+ onEnd?.();
137
+ return;
138
+ }
139
+ if (!pathExistsSync(jsFile)) {
140
+ this.error("js file cannot found");
141
+ onEnd?.();
142
+ return;
143
+ }
144
+ const cssCode = readFileSync(cssFile, "utf-8");
145
+ const jsCode = readFileSync(jsFile, "utf-8");
146
+ 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)})();`;
147
+ writeFileSync(jsFile, `${injectCode}${jsCode}`);
148
+ removeSync(cssFile);
149
+ onEnd?.();
150
+ }
151
+ };
152
+ }
153
+
154
+ // src/copy.ts
155
+ import fse2 from "fs-extra";
156
+ var { copySync, copyFileSync } = fse2;
157
+ function copy(options) {
158
+ return {
159
+ name: "vite-plugin-varlet-copy",
160
+ buildStart() {
161
+ options.paths.forEach((copyPath) => {
162
+ try {
163
+ ;
164
+ (copyPath.type === "folder" ? copySync : copyFileSync)(copyPath.from, copyPath.to);
165
+ } catch (e) {
166
+ this.warn(e);
167
+ }
168
+ });
169
+ }
170
+ };
171
+ }
172
+ export {
173
+ copy,
174
+ html,
175
+ inlineCss,
176
+ markdown
177
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@varlet/vite-plugins",
3
- "version": "2.16.2",
3
+ "version": "2.16.3-alpha.1694361535255",
4
4
  "type": "module",
5
5
  "description": "vite plugins of varlet",
6
6
  "main": "lib/index.js",
@@ -25,19 +25,19 @@
25
25
  "fs-extra": "^9.0.1",
26
26
  "highlight.js": "^10.7.2",
27
27
  "markdown-it": "^12.2.3",
28
- "@varlet/shared": "2.16.2"
28
+ "@varlet/shared": "2.16.3-alpha.1694361535255"
29
29
  },
30
30
  "devDependencies": {
31
+ "tsup": "7.2.0",
31
32
  "vite": "4.3.5",
32
33
  "typescript": "^5.1.5",
33
- "rimraf": "^5.0.1",
34
34
  "@types/node": "^18.7.20",
35
35
  "@types/ejs": "^3.1.1",
36
36
  "@types/markdown-it": "^12.2.3",
37
37
  "@types/fs-extra": "^9.0.2"
38
38
  },
39
39
  "scripts": {
40
- "dev": "tsc --watch",
41
- "build": "rimraf ./lib && tsc"
40
+ "dev": "tsup src/index.ts --format esm --out-dir=lib --watch --dts",
41
+ "build": "tsup src/index.ts --format esm --out-dir=lib --dts --clean"
42
42
  }
43
43
  }
package/tsconfig.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "extends": "../../tsconfig.json",
3
3
  "compilerOptions": {
4
+ "target": "esnext",
4
5
  "outDir": "./lib"
5
6
  },
6
7
  "include": ["src/**/*"]
package/lib/copy.d.ts DELETED
@@ -1,10 +0,0 @@
1
- import type { Plugin } from 'vite';
2
- export interface CopyPath {
3
- from: string;
4
- to: string;
5
- type: 'folder' | 'file';
6
- }
7
- export interface CopyOptions {
8
- paths: CopyPath[];
9
- }
10
- export declare function copy(options: CopyOptions): Plugin;
package/lib/copy.js DELETED
@@ -1,18 +0,0 @@
1
- import fse from 'fs-extra';
2
- const { copySync, copyFileSync } = fse;
3
- export function copy(options) {
4
- return {
5
- name: 'vite-plugin-varlet-copy',
6
- buildStart() {
7
- options.paths.forEach((copyPath) => {
8
- try {
9
- ;
10
- (copyPath.type === 'folder' ? copySync : copyFileSync)(copyPath.from, copyPath.to);
11
- }
12
- catch (e) {
13
- this.warn(e);
14
- }
15
- });
16
- },
17
- };
18
- }
package/lib/html.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { Plugin } from 'vite';
2
- export interface HtmlOptions {
3
- data?: Record<string, string>;
4
- }
5
- export declare function html(options: HtmlOptions): Plugin;
package/lib/html.js DELETED
@@ -1,12 +0,0 @@
1
- import ejs from 'ejs';
2
- export function html(options) {
3
- return {
4
- name: 'vite-plugin-varlet-html',
5
- transformIndexHtml: {
6
- order: 'pre',
7
- transform(html) {
8
- return ejs.render(html, options.data);
9
- },
10
- },
11
- };
12
- }
package/lib/inlineCss.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import type { Plugin } from 'vite';
2
- export interface InlineCssOptions {
3
- cssFile: string;
4
- jsFile: string;
5
- onEnd?(): void;
6
- }
7
- export declare function inlineCss(options: InlineCssOptions): Plugin;
package/lib/inlineCss.js DELETED
@@ -1,29 +0,0 @@
1
- import fse from 'fs-extra';
2
- const { pathExistsSync, writeFileSync, readFileSync, removeSync } = fse;
3
- export function inlineCss(options) {
4
- return {
5
- name: 'vite-plugin-varlet-inline-css',
6
- apply: 'build',
7
- closeBundle() {
8
- const { cssFile, jsFile, onEnd } = options;
9
- if (!pathExistsSync(cssFile)) {
10
- this.warn('css file cannot found');
11
- onEnd === null || onEnd === void 0 ? void 0 : onEnd();
12
- return;
13
- }
14
- if (!pathExistsSync(jsFile)) {
15
- this.error('js file cannot found');
16
- onEnd === null || onEnd === void 0 ? void 0 : onEnd();
17
- return;
18
- }
19
- const cssCode = readFileSync(cssFile, 'utf-8');
20
- const jsCode = readFileSync(jsFile, 'utf-8');
21
- const injectCode = `;(function(){var style=document.createElement('style');style.type='text/css';\
22
- style.rel='stylesheet';style.appendChild(document.createTextNode(\`${cssCode.replace(/\\/g, '\\\\')}\`));\
23
- var head=document.querySelector('head');head.appendChild(style)})();`;
24
- writeFileSync(jsFile, `${injectCode}${jsCode}`);
25
- removeSync(cssFile);
26
- onEnd === null || onEnd === void 0 ? void 0 : onEnd();
27
- },
28
- };
29
- }
package/lib/markdown.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import type { Plugin } from 'vite';
2
- export interface MarkdownOptions {
3
- style?: string;
4
- }
5
- export declare function markdown(options: MarkdownOptions): Plugin;
package/lib/markdown.js DELETED
@@ -1,117 +0,0 @@
1
- import markdownIt from 'markdown-it';
2
- import hljs from 'highlight.js';
3
- import { kebabCase } from '@varlet/shared';
4
- function htmlWrapper(html) {
5
- const matches = html.matchAll(/<h3>(.*?)<\/h3>/g);
6
- const hGroup = html
7
- .replace(/<h3>/g, () => {
8
- const content = matches.next().value[1];
9
- return `:::<h3 id="${content}"><router-link to="#${content}">#</router-link>`;
10
- })
11
- .replace(/<h2/g, ':::<h2')
12
- .split(':::');
13
- const cardGroup = hGroup
14
- .map((fragment) => (fragment.includes('<h3') ? `<div class="card">${fragment}</div>` : fragment))
15
- .join('');
16
- return cardGroup.replace(/<code>/g, '<code v-pre>');
17
- }
18
- function extractComponents(source) {
19
- const componentRE = /import (.+) from ['"].+['"]/;
20
- const importRE = /import .+ from ['"].+['"]/g;
21
- const vueRE = /```vue((.|\r|\n)*?)```/g;
22
- const imports = [];
23
- const components = [];
24
- source = source.replace(vueRE, (_, p1) => {
25
- const partImports = p1.match(importRE);
26
- const partComponents = partImports === null || partImports === void 0 ? void 0 : partImports.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
- };
40
- }
41
- function injectCodeExample(source) {
42
- const codeRE = /(<pre class="hljs">(.|\r|\n)*?<\/pre>)/g;
43
- return source.replace(codeRE, (str) => {
44
- const flags = [
45
- '// playground-ignore\n',
46
- '<span class="hljs-meta">#</span><span class="bash"> playground-ignore</span>\n',
47
- '<span class="hljs-comment">// playground-ignore</span>\n',
48
- '<span class="hljs-comment">/* playground-ignore */</span>\n',
49
- '<span class="hljs-comment">&lt;!-- playground-ignore --&gt;</span>\n',
50
- ];
51
- const attr = flags.some((flag) => str.includes(flag)) ? 'playground-ignore' : '';
52
- str = flags.reduce((str, flag) => str.replace(flag, ''), str);
53
- return `<var-site-code-example ${attr}>${str}</var-site-code-example>`;
54
- });
55
- }
56
- function highlight(str, lang, style) {
57
- let link = '';
58
- if (style) {
59
- link = '<link class="hljs-style" rel="stylesheet" href="' + style + '"/>';
60
- }
61
- if (lang && hljs.getLanguage(lang)) {
62
- return ('<pre class="hljs"><code>' +
63
- link +
64
- hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
65
- '</code></pre>');
66
- }
67
- return '';
68
- }
69
- function markdownToVue(source, options) {
70
- const { source: vueSource, imports, components } = extractComponents(source);
71
- const md = markdownIt({
72
- html: true,
73
- highlight: (str, lang) => highlight(str, lang, options.style),
74
- });
75
- let templateString = htmlWrapper(md.render(vueSource));
76
- templateString = templateString.replace(/process.env/g, '<span>process.env</span>');
77
- templateString = injectCodeExample(templateString);
78
- return `
79
- <template><div class="varlet-site-doc">${templateString}</div></template>
80
-
81
- <script>
82
- ${imports.join('\n')}
83
-
84
- export default {
85
- components: {
86
- ${components.join(',')}
87
- }
88
- }
89
- </script>
90
- `;
91
- }
92
- export function markdown(options) {
93
- return {
94
- name: 'vite-plugin-varlet-markdown',
95
- enforce: 'pre',
96
- transform(source, id) {
97
- if (!/\.md$/.test(id)) {
98
- return;
99
- }
100
- try {
101
- return markdownToVue(source, options);
102
- }
103
- catch (e) {
104
- this.error(e);
105
- return '';
106
- }
107
- },
108
- async handleHotUpdate(ctx) {
109
- if (!/\.md$/.test(ctx.file))
110
- return;
111
- const readSource = ctx.read;
112
- ctx.read = async function () {
113
- return markdownToVue(await readSource(), options);
114
- };
115
- },
116
- };
117
- }