@md-plugins/vite-examples-plugin 0.1.0-alpha.1 → 0.1.0-alpha.11

package/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024-present, Jeff Galbraith
+Copyright (c) 2024-present, MD-PLUGINS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -30,34 +30,48 @@ pnpm add @md-plugins/vite-examples-plugin
 
 To use the `viteExamplesPlugin`, configure it in your Vite project:
 
-```js
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import { viteExamplesPlugin } from '@md-plugin/vite-examples-plugin';
-
-export default defineConfig({
-  plugins: [vue(), viteExamplesPlugin('/absolute/path/to/examples')],
-});
+```typescript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteExamplesPlugin, viteManualChunks } from 'vite-examples-plugin'
+
+export default defineConfig(({ mode }) => {
+  const isProduction = mode === 'production'
+
+  return {
+    plugins: [
+      vue(),
+      viteExamplesPlugin({ isProd: isProduction, path: '/absolute/path/to/examples' }),
+    ],
+  }
+})
 ```
 
 ### Manual Chunk Splitting with Vite
 
 ```js
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import { viteExamplesPlugin, viteManualChunks } from 'vite-examples-plugin';
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteExamplesPlugin, viteManualChunks } from 'vite-examples-plugin'
 
-export default defineConfig({
-  plugins: [vue(), viteExamplesPlugin('/absolute/path/to/examples')],
-  build: {
-    chunkSizeWarningLimit: 650,
-    rollupOptions: {
-      output: {
-        manualChunks: viteManualChunks,
+export default defineConfig(({ mode }) => {
+  const isProduction = mode === 'production'
+
+  return {
+    plugins: [
+      vue(),
+      viteExamplesPlugin({ isProd: isProduction, path: '/absolute/path/to/examples' }),
+    ],
+    build: {
+      chunkSizeWarningLimit: 650,
+      rollupOptions: {
+        output: {
+          manualChunks: viteManualChunks,
+        },
       },
     },
   },
-});
+})
 ```
 
 ## Quasar Framework Configuration
@@ -74,7 +88,7 @@ export default defineConfig((ctx) => {
 ```js
   build: {
     vitePlugins: [
-      viteExamplesPlugin(ctx.appPaths.srcDir + '/examples'),
+      viteExamplesPlugin({ isProd: ctx.isProd, path: ctx.appPaths.srcDir + '/examples' }),
       // ...
     ],
   },
@@ -84,19 +98,14 @@ export default defineConfig((ctx) => {
 ### Manual Chunk Splitting with Quasar
 
 ```js
-import {
-  viteExamplesPlugin,
-  viteManualChunks,
-} from '@md-plugins/vite-examples-plugin';
+import { viteExamplesPlugin, viteManualChunks } from '@md-plugins/vite-examples-plugin'
 ```
 
 ```js
   build: {
     extendViteConf(viteConf, { isClient }) {
       if (ctx.prod && isClient) {
-        if (!viteConf.build) {
-          viteConf.build = {}
-        }
+        viteConf.build = viteConf.build || {}
         viteConf.build.chunkSizeWarningLimit = 650
         viteConf.build.rollupOptions = {
           output: { manualChunks: viteManualChunks },
@@ -156,12 +165,12 @@ During development, the plugin uses Vite's `import.meta.glob` to dynamically loa
 ```ts
 export const code = import.meta.glob('/src/examples/example1/*.vue', {
   eager: true,
-});
+})
 export const source = import.meta.glob('/src/examples/example1/*.vue', {
   query: '?raw',
   import: 'default',
   eager: true,
-});
+})
 ```
 
 ### Production Mode
@@ -169,10 +178,10 @@ export const source = import.meta.glob('/src/examples/example1/*.vue', {
 In production, the plugin preloads example components and their raw source code, generating import and export statements:
 
 ```ts
-import Example1 from 'app/src/examples/example1/Example1.vue';
-import RawExample1 from 'app/src/examples/example1/Example1.vue?raw';
+import Example1 from 'app/src/examples/example1/Example1.vue'
+import RawExample1 from 'app/src/examples/example1/Example1.vue?raw'
 
-export { Example1, RawExample1 };
+export { Example1, RawExample1 }
 ```
 
 ## Development Notes
@@ -196,9 +205,13 @@ The plugin is structured with the following components:
 If the `targetFolder` is not defined when the plugin is initialized, an error will be thrown:
 
 ```ts
-throw new Error('targetFolder is not defined');
+throw new Error('targetFolder is not defined')
 ```
 
+## Documentation
+
+In case this README falls out of date, please refer to the [documentation](https://md-plugins.netlify.app/vite-plugins/viteexamplesplugin/overview) for the latest information.
+
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import { Plugin } from 'vite';
+
 /**
  * Creates a Vite plugin for handling Markdown examples.
  *
@@ -5,19 +7,23 @@
  * that creates the actual Vite plugin. The returned plugin resolves and loads
  * example code based on the production or development environment.
  *
+ * @param isProd - A boolean indicating whether the Vite build is in production mode.
+ *                 This parameter determines whether the plugin will use the `prodLoad` or `devLoad` function for loading example code.
+ *
  * @param path - The path to the directory containing the example files.
  *               This path will be used as the target folder for resolving examples.
+ *               The `targetFolder` variable is set to this value before creating the Vite plugin.
  *
- * @returns A function that creates a Vite plugin. This function takes a boolean
- *          parameter indicating whether the build is in production mode and
- *          returns the configured Vite plugin object.
+ * @returns A function that creates a Vite plugin.
+ *          The returned function takes a boolean parameter `isProd` and returns a Vite plugin object.
+ *          The plugin object has a `name`, `enforce`, `resolveId`, and `load` property.
+ *          The `resolveId` property resolves module IDs starting with "examples:" and returns a resolved ID.
+ *          The `load` property loads example code based on the production or development environment.
  */
-declare function viteExamplesPlugin(path: string): (isProd: boolean) => {
-    name: string;
-    enforce: 'pre';
-    resolveId(id: string): string | undefined;
-    load(id: string): string | undefined;
-};
+declare function viteExamplesPlugin({ isProd, path }: {
+    isProd: boolean;
+    path: string;
+}): Plugin;
 
 /**
  * A function to determine the manual chunk name for a given module ID.

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { Plugin } from 'vite';
+
 /**
  * Creates a Vite plugin for handling Markdown examples.
  *
@@ -5,19 +7,23 @@
  * that creates the actual Vite plugin. The returned plugin resolves and loads
  * example code based on the production or development environment.
  *
+ * @param isProd - A boolean indicating whether the Vite build is in production mode.
+ *                 This parameter determines whether the plugin will use the `prodLoad` or `devLoad` function for loading example code.
+ *
  * @param path - The path to the directory containing the example files.
  *               This path will be used as the target folder for resolving examples.
+ *               The `targetFolder` variable is set to this value before creating the Vite plugin.
  *
- * @returns A function that creates a Vite plugin. This function takes a boolean
- *          parameter indicating whether the build is in production mode and
- *          returns the configured Vite plugin object.
+ * @returns A function that creates a Vite plugin.
+ *          The returned function takes a boolean parameter `isProd` and returns a Vite plugin object.
+ *          The plugin object has a `name`, `enforce`, `resolveId`, and `load` property.
+ *          The `resolveId` property resolves module IDs starting with "examples:" and returns a resolved ID.
+ *          The `load` property loads example code based on the production or development environment.
  */
-declare function viteExamplesPlugin(path: string): (isProd: boolean) => {
-    name: string;
-    enforce: 'pre';
-    resolveId(id: string): string | undefined;
-    load(id: string): string | undefined;
-};
+declare function viteExamplesPlugin({ isProd, path }: {
+    isProd: boolean;
+    path: string;
+}): Plugin;
 
 /**
  * A function to determine the manual chunk name for a given module ID.

package/dist/index.mjs

@@ -16,9 +16,7 @@ function prodLoad(id) {
   if (id.startsWith(resolvedIdPrefix)) {
     const exampleId = id.substring(id.indexOf(":") + 1);
     const files = globSync("*.vue", { cwd: join(targetFolder, exampleId) });
-    const importList = files.map(
-      (entry) => entry.substring(0, entry.length - 4)
-    );
+    const importList = files.map((entry) => entry.substring(0, entry.length - 4));
     const importStatements = importList.map(
       (entry) => `import ${entry} from 'app/src/examples/${exampleId}/${entry}.vue'
 import Raw${entry} from 'app/src/examples/${exampleId}/${entry}.vue?raw'`
@@ -46,9 +44,9 @@ function vitePlugin(isProd) {
     load: isProd ? prodLoad : devLoad
   };
 }
-function viteExamplesPlugin(path) {
+function viteExamplesPlugin({ isProd, path }) {
   targetFolder = path;
-  return vitePlugin;
+  return vitePlugin(isProd);
 }
 
 const vendorRE = /node_modules[\\/](vue|@vue|quasar|vue-router)[\\/](.*)\.(m?js|css|sass)$/;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/vite-examples-plugin",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.11",
   "description": "A Vite plugin for @md-plugins for handling imported examples in markdown files.",
   "keywords": [
     "markdown-it",
@@ -37,11 +37,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "tinyglobby": "^0.2.10"
+  "devDependencies": {
+    "tinyglobby": "^0.2.10",
+    "vite": "^6.0.7"
   },
   "scripts": {
     "build": "unbuild",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist/ node_modules/"
   }
 }