@md-plugins/vite-examples-plugin 0.1.0-alpha.1 → 0.1.0-alpha.5
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/LICENSE.md +1 -1
- package/README.md +24 -25
- package/dist/index.d.mts +12 -9
- package/dist/index.d.ts +12 -9
- package/dist/index.mjs +3 -5
- package/package.json +5 -4
package/LICENSE.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
The MIT License (MIT)
|
|
2
2
|
|
|
3
|
-
Copyright (c) 2024-present,
|
|
3
|
+
Copyright (c) 2024-present, MD-PLUGINS
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/README.md
CHANGED
|
@@ -30,22 +30,26 @@ pnpm add @md-plugins/vite-examples-plugin
|
|
|
30
30
|
|
|
31
31
|
To use the `viteExamplesPlugin`, configure it in your Vite project:
|
|
32
32
|
|
|
33
|
-
```
|
|
34
|
-
import { defineConfig } from 'vite'
|
|
35
|
-
import vue from '@vitejs/plugin-vue'
|
|
36
|
-
import { viteExamplesPlugin } from '
|
|
33
|
+
```typescript
|
|
34
|
+
import { defineConfig } from 'vite'
|
|
35
|
+
import vue from '@vitejs/plugin-vue'
|
|
36
|
+
import { viteExamplesPlugin, viteManualChunks } from 'vite-examples-plugin'
|
|
37
37
|
|
|
38
|
-
export default defineConfig({
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
export default defineConfig(({ mode }) => {
|
|
39
|
+
const isProduction = mode === 'production'
|
|
40
|
+
|
|
41
|
+
return {
|
|
42
|
+
plugins: [vue(), viteExamplesPlugin(isProduction, '/absolute/path/to/examples')],
|
|
43
|
+
}
|
|
44
|
+
})
|
|
41
45
|
```
|
|
42
46
|
|
|
43
47
|
### Manual Chunk Splitting with Vite
|
|
44
48
|
|
|
45
49
|
```js
|
|
46
|
-
import { defineConfig } from 'vite'
|
|
47
|
-
import vue from '@vitejs/plugin-vue'
|
|
48
|
-
import { viteExamplesPlugin, viteManualChunks } from 'vite-examples-plugin'
|
|
50
|
+
import { defineConfig } from 'vite'
|
|
51
|
+
import vue from '@vitejs/plugin-vue'
|
|
52
|
+
import { viteExamplesPlugin, viteManualChunks } from 'vite-examples-plugin'
|
|
49
53
|
|
|
50
54
|
export default defineConfig({
|
|
51
55
|
plugins: [vue(), viteExamplesPlugin('/absolute/path/to/examples')],
|
|
@@ -57,7 +61,7 @@ export default defineConfig({
|
|
|
57
61
|
},
|
|
58
62
|
},
|
|
59
63
|
},
|
|
60
|
-
})
|
|
64
|
+
})
|
|
61
65
|
```
|
|
62
66
|
|
|
63
67
|
## Quasar Framework Configuration
|
|
@@ -74,7 +78,7 @@ export default defineConfig((ctx) => {
|
|
|
74
78
|
```js
|
|
75
79
|
build: {
|
|
76
80
|
vitePlugins: [
|
|
77
|
-
viteExamplesPlugin(ctx.appPaths.srcDir + '/examples'),
|
|
81
|
+
viteExamplesPlugin(ctx.isProd, ctx.appPaths.srcDir + '/examples'),
|
|
78
82
|
// ...
|
|
79
83
|
],
|
|
80
84
|
},
|
|
@@ -84,19 +88,14 @@ export default defineConfig((ctx) => {
|
|
|
84
88
|
### Manual Chunk Splitting with Quasar
|
|
85
89
|
|
|
86
90
|
```js
|
|
87
|
-
import {
|
|
88
|
-
viteExamplesPlugin,
|
|
89
|
-
viteManualChunks,
|
|
90
|
-
} from '@md-plugins/vite-examples-plugin';
|
|
91
|
+
import { viteExamplesPlugin, viteManualChunks } from '@md-plugins/vite-examples-plugin'
|
|
91
92
|
```
|
|
92
93
|
|
|
93
94
|
```js
|
|
94
95
|
build: {
|
|
95
96
|
extendViteConf(viteConf, { isClient }) {
|
|
96
97
|
if (ctx.prod && isClient) {
|
|
97
|
-
|
|
98
|
-
viteConf.build = {}
|
|
99
|
-
}
|
|
98
|
+
viteConf.build = viteConf.build || {}
|
|
100
99
|
viteConf.build.chunkSizeWarningLimit = 650
|
|
101
100
|
viteConf.build.rollupOptions = {
|
|
102
101
|
output: { manualChunks: viteManualChunks },
|
|
@@ -156,12 +155,12 @@ During development, the plugin uses Vite's `import.meta.glob` to dynamically loa
|
|
|
156
155
|
```ts
|
|
157
156
|
export const code = import.meta.glob('/src/examples/example1/*.vue', {
|
|
158
157
|
eager: true,
|
|
159
|
-
})
|
|
158
|
+
})
|
|
160
159
|
export const source = import.meta.glob('/src/examples/example1/*.vue', {
|
|
161
160
|
query: '?raw',
|
|
162
161
|
import: 'default',
|
|
163
162
|
eager: true,
|
|
164
|
-
})
|
|
163
|
+
})
|
|
165
164
|
```
|
|
166
165
|
|
|
167
166
|
### Production Mode
|
|
@@ -169,10 +168,10 @@ export const source = import.meta.glob('/src/examples/example1/*.vue', {
|
|
|
169
168
|
In production, the plugin preloads example components and their raw source code, generating import and export statements:
|
|
170
169
|
|
|
171
170
|
```ts
|
|
172
|
-
import Example1 from 'app/src/examples/example1/Example1.vue'
|
|
173
|
-
import RawExample1 from 'app/src/examples/example1/Example1.vue?raw'
|
|
171
|
+
import Example1 from 'app/src/examples/example1/Example1.vue'
|
|
172
|
+
import RawExample1 from 'app/src/examples/example1/Example1.vue?raw'
|
|
174
173
|
|
|
175
|
-
export { Example1, RawExample1 }
|
|
174
|
+
export { Example1, RawExample1 }
|
|
176
175
|
```
|
|
177
176
|
|
|
178
177
|
## Development Notes
|
|
@@ -196,7 +195,7 @@ The plugin is structured with the following components:
|
|
|
196
195
|
If the `targetFolder` is not defined when the plugin is initialized, an error will be thrown:
|
|
197
196
|
|
|
198
197
|
```ts
|
|
199
|
-
throw new Error('targetFolder is not defined')
|
|
198
|
+
throw new Error('targetFolder is not defined')
|
|
200
199
|
```
|
|
201
200
|
|
|
202
201
|
## License
|
package/dist/index.d.mts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { Plugin } from '/home/jeff/git/github/jeff/md-plugins/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.5_jiti@2.4.2_sass-embedded@1.83.0_terser@5.37.0/node_modules/vite/dist/node/index.d.ts';
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Creates a Vite plugin for handling Markdown examples.
|
|
3
5
|
*
|
|
@@ -5,19 +7,20 @@
|
|
|
5
7
|
* that creates the actual Vite plugin. The returned plugin resolves and loads
|
|
6
8
|
* example code based on the production or development environment.
|
|
7
9
|
*
|
|
10
|
+
* @param isProd - A boolean indicating whether the Vite build is in production mode.
|
|
11
|
+
* This parameter determines whether the plugin will use the `prodLoad` or `devLoad` function for loading example code.
|
|
12
|
+
*
|
|
8
13
|
* @param path - The path to the directory containing the example files.
|
|
9
14
|
* This path will be used as the target folder for resolving examples.
|
|
15
|
+
* The `targetFolder` variable is set to this value before creating the Vite plugin.
|
|
10
16
|
*
|
|
11
|
-
* @returns A function that creates a Vite plugin.
|
|
12
|
-
*
|
|
13
|
-
*
|
|
17
|
+
* @returns A function that creates a Vite plugin.
|
|
18
|
+
* The returned function takes a boolean parameter `isProd` and returns a Vite plugin object.
|
|
19
|
+
* The plugin object has a `name`, `enforce`, `resolveId`, and `load` property.
|
|
20
|
+
* The `resolveId` property resolves module IDs starting with "examples:" and returns a resolved ID.
|
|
21
|
+
* The `load` property loads example code based on the production or development environment.
|
|
14
22
|
*/
|
|
15
|
-
declare function viteExamplesPlugin(path: string):
|
|
16
|
-
name: string;
|
|
17
|
-
enforce: 'pre';
|
|
18
|
-
resolveId(id: string): string | undefined;
|
|
19
|
-
load(id: string): string | undefined;
|
|
20
|
-
};
|
|
23
|
+
declare function viteExamplesPlugin(isProd: boolean, path: string): Plugin;
|
|
21
24
|
|
|
22
25
|
/**
|
|
23
26
|
* A function to determine the manual chunk name for a given module ID.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { Plugin } from '/home/jeff/git/github/jeff/md-plugins/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.5_jiti@2.4.2_sass-embedded@1.83.0_terser@5.37.0/node_modules/vite/dist/node/index.d.ts';
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Creates a Vite plugin for handling Markdown examples.
|
|
3
5
|
*
|
|
@@ -5,19 +7,20 @@
|
|
|
5
7
|
* that creates the actual Vite plugin. The returned plugin resolves and loads
|
|
6
8
|
* example code based on the production or development environment.
|
|
7
9
|
*
|
|
10
|
+
* @param isProd - A boolean indicating whether the Vite build is in production mode.
|
|
11
|
+
* This parameter determines whether the plugin will use the `prodLoad` or `devLoad` function for loading example code.
|
|
12
|
+
*
|
|
8
13
|
* @param path - The path to the directory containing the example files.
|
|
9
14
|
* This path will be used as the target folder for resolving examples.
|
|
15
|
+
* The `targetFolder` variable is set to this value before creating the Vite plugin.
|
|
10
16
|
*
|
|
11
|
-
* @returns A function that creates a Vite plugin.
|
|
12
|
-
*
|
|
13
|
-
*
|
|
17
|
+
* @returns A function that creates a Vite plugin.
|
|
18
|
+
* The returned function takes a boolean parameter `isProd` and returns a Vite plugin object.
|
|
19
|
+
* The plugin object has a `name`, `enforce`, `resolveId`, and `load` property.
|
|
20
|
+
* The `resolveId` property resolves module IDs starting with "examples:" and returns a resolved ID.
|
|
21
|
+
* The `load` property loads example code based on the production or development environment.
|
|
14
22
|
*/
|
|
15
|
-
declare function viteExamplesPlugin(path: string):
|
|
16
|
-
name: string;
|
|
17
|
-
enforce: 'pre';
|
|
18
|
-
resolveId(id: string): string | undefined;
|
|
19
|
-
load(id: string): string | undefined;
|
|
20
|
-
};
|
|
23
|
+
declare function viteExamplesPlugin(isProd: boolean, path: string): Plugin;
|
|
21
24
|
|
|
22
25
|
/**
|
|
23
26
|
* A function to determine the manual chunk name for a given module ID.
|
package/dist/index.mjs
CHANGED
|
@@ -16,9 +16,7 @@ function prodLoad(id) {
|
|
|
16
16
|
if (id.startsWith(resolvedIdPrefix)) {
|
|
17
17
|
const exampleId = id.substring(id.indexOf(":") + 1);
|
|
18
18
|
const files = globSync("*.vue", { cwd: join(targetFolder, exampleId) });
|
|
19
|
-
const importList = files.map(
|
|
20
|
-
(entry) => entry.substring(0, entry.length - 4)
|
|
21
|
-
);
|
|
19
|
+
const importList = files.map((entry) => entry.substring(0, entry.length - 4));
|
|
22
20
|
const importStatements = importList.map(
|
|
23
21
|
(entry) => `import ${entry} from 'app/src/examples/${exampleId}/${entry}.vue'
|
|
24
22
|
import Raw${entry} from 'app/src/examples/${exampleId}/${entry}.vue?raw'`
|
|
@@ -46,9 +44,9 @@ function vitePlugin(isProd) {
|
|
|
46
44
|
load: isProd ? prodLoad : devLoad
|
|
47
45
|
};
|
|
48
46
|
}
|
|
49
|
-
function viteExamplesPlugin(path) {
|
|
47
|
+
function viteExamplesPlugin(isProd, path) {
|
|
50
48
|
targetFolder = path;
|
|
51
|
-
return vitePlugin;
|
|
49
|
+
return vitePlugin(isProd);
|
|
52
50
|
}
|
|
53
51
|
|
|
54
52
|
const vendorRE = /node_modules[\\/](vue|@vue|quasar|vue-router)[\\/](.*)\.(m?js|css|sass)$/;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@md-plugins/vite-examples-plugin",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.5",
|
|
4
4
|
"description": "A Vite plugin for @md-plugins for handling imported examples in markdown files.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"markdown-it",
|
|
@@ -37,11 +37,12 @@
|
|
|
37
37
|
"publishConfig": {
|
|
38
38
|
"access": "public"
|
|
39
39
|
},
|
|
40
|
-
"
|
|
41
|
-
"tinyglobby": "^0.2.10"
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"tinyglobby": "^0.2.10",
|
|
42
|
+
"vite": "^6.0.7"
|
|
42
43
|
},
|
|
43
44
|
"scripts": {
|
|
44
45
|
"build": "unbuild",
|
|
45
|
-
"clean": "rm -rf dist"
|
|
46
|
+
"clean": "rm -rf dist/ node_modules/"
|
|
46
47
|
}
|
|
47
48
|
}
|