@md-plugins/vite-examples-plugin 0.1.0-rc.9 → 1.1.0

package/README.md

@@ -1,13 +1,25 @@
 # @md-plugins/vite-examples-plugin
 
-A Vite plugin that facilitates handling Vue example files in both development and production modes. The plugin allows you to load and transform example components and their raw source code for usage in your application.
+[![npm version](https://img.shields.io/npm/v/@md-plugins/vite-examples-plugin?label=%40md-plugins%2Fvite-examples-plugin)](https://www.npmjs.com/package/@md-plugins/vite-examples-plugin)
+[![npm downloads](https://img.shields.io/npm/dt/@md-plugins/vite-examples-plugin)](https://www.npmjs.com/package/@md-plugins/vite-examples-plugin)
+[![npm monthly downloads](https://img.shields.io/npm/dm/@md-plugins/vite-examples-plugin)](https://www.npmjs.com/package/@md-plugins/vite-examples-plugin)
+[![license](https://img.shields.io/npm/l/@md-plugins/vite-examples-plugin)](https://www.npmjs.com/package/@md-plugins/vite-examples-plugin)
+
+<span class="badge-github-sponsors"><a href="https://github.com/sponsors/hawkeye64" title="Sponsor this project on GitHub"><img src="https://img.shields.io/badge/github-sponsors-ea4aaa.svg?logo=githubsponsors&logoColor=white" alt="GitHub Sponsors button" /></a></span>
+<span class="badge-paypal"><a href="https://paypal.me/hawkeye64" title="Donate to this project using Paypal"><img src="https://img.shields.io/badge/paypal-donate-yellow.svg" alt="PayPal donate button" /></a></span>
+
+[![Discord](https://img.shields.io/badge/discord-join%20server-738ADB?style=for-the-badge&logo=discord&logoColor=738ADB)](https://chat.quasar.dev)
+[![X](https://img.shields.io/badge/follow-@jgalbraith64-1DA1F2?style=for-the-badge&logo=x&logoColor=1DA1F2)](https://twitter.com/jgalbraith64)
+
+A Vite plugin for documentation examples. It loads Vue example components and their raw source so docs pages can render a live demo, show the source code, and export the same example to CodePen-style sandboxes.
 
 ## Features
 
-- Supports loading Vue example files dynamically during development.
-- Generates import and export statements for Vue example files in production.
-- Easily handles raw and compiled component imports.
-- Enables seamless integration of example files into your project.
+- Loads Vue example files dynamically during development.
+- Generates stable example imports for production builds.
+- Provides both compiled components and raw source strings.
+- Supports Q-Press `MarkdownExample` usage and direct Vue/Vite documentation sites.
+- Includes manual chunk helpers for keeping example bundles organized.
 
 ## Installation
 

package/dist/index.d.mts

@@ -1,5 +1,4 @@
-import { Plugin } from 'vite';
-
+import { Plugin } from "vite";
 /**
  * Creates a Vite plugin for handling Markdown examples.
  *
@@ -24,10 +23,9 @@ import { Plugin } from 'vite';
  * Creates the md-plugins examples plugin and configures its example source path.
  */
 declare function viteExamplesPlugin({ isProd, path }: {
-    isProd: boolean;
-    path: string;
+  isProd: boolean;
+  path: string;
 }): Plugin;
-
 /**
  * A function to determine the manual chunk name for a given module ID.
  *
@@ -38,5 +36,4 @@ declare function viteExamplesPlugin({ isProd, path }: {
  * Places Quasar docs examples and related vendors into stable Vite manual chunks.
  */
 declare function viteManualChunks(id: string): string | undefined;
-
-export { viteExamplesPlugin, viteManualChunks };
+export { viteExamplesPlugin, viteManualChunks };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import { Plugin } from 'vite';
-
+import { Plugin } from "vite";
 /**
  * Creates a Vite plugin for handling Markdown examples.
  *
@@ -24,10 +23,9 @@ import { Plugin } from 'vite';
  * Creates the md-plugins examples plugin and configures its example source path.
  */
 declare function viteExamplesPlugin({ isProd, path }: {
-    isProd: boolean;
-    path: string;
+  isProd: boolean;
+  path: string;
 }): Plugin;
-
 /**
  * A function to determine the manual chunk name for a given module ID.
  *
@@ -38,5 +36,4 @@ declare function viteExamplesPlugin({ isProd, path }: {
  * Places Quasar docs examples and related vendors into stable Vite manual chunks.
  */
 declare function viteManualChunks(id: string): string | undefined;
-
-export { viteExamplesPlugin, viteManualChunks };
+export { viteExamplesPlugin, viteManualChunks };

package/dist/index.mjs

@@ -1,66 +1,54 @@
-import { join } from 'node:path';
-import { globSync } from 'tinyglobby';
+import { join } from "node:path";
+import { globSync } from "tinyglobby";
 
 const moduleIdRE = /^examples:/;
 const resolvedIdPrefix = "\0examples:";
 let targetFolder = "";
+
+
 function devLoad(id) {
-  if (id.startsWith(resolvedIdPrefix)) {
-    const query = `'/src/examples/${id.substring(id.indexOf(":") + 1)}/*.vue'`;
-    return `export const code = import.meta.glob(${query})
-export const source = import.meta.glob(${query}, { query: '?raw', import: 'default' })`;
-  }
-  return void 0;
+	if (id.startsWith(resolvedIdPrefix)) {
+		const query = `'/src/examples/${id.substring(id.indexOf(":") + 1)}/*.vue'`;
+		return `export const code = import.meta.glob(${query})\nexport const source = import.meta.glob(${query}, { query: '?raw', import: 'default' })`;
+	}
 }
+
+
 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 importStatements = importList.map(
-      (entry) => `import ${entry} from '@/examples/${exampleId}/${entry}.vue'
-import Raw${entry} from '@/examples/${exampleId}/${entry}.vue?raw'`
-    ).join("\n");
-    const exportStatements = importList.map((entry) => `${entry},Raw${entry}`).join(",");
-    return importStatements + `
-export {${exportStatements}}`;
-  }
-  return void 0;
+	if (id.startsWith(resolvedIdPrefix)) {
+		const exampleId = id.substring(id.indexOf(":") + 1);
+		const importList = globSync("*.vue", { cwd: join(targetFolder, exampleId) }).map((entry) => entry.substring(0, entry.length - 4));
+		return importList.map((entry) => `import ${entry} from '@/examples/${exampleId}/${entry}.vue'\nimport Raw${entry} from '@/examples/${exampleId}/${entry}.vue?raw'`).join("\n") + `\nexport {${importList.map((entry) => `${entry},Raw${entry}`).join(",")}}`;
+	}
 }
+
+
 function vitePlugin(isProd) {
-  if (!targetFolder) {
-    throw new Error("targetFolder is not defined");
-  }
-  return {
-    name: "markdown-examples",
-    enforce: "pre",
-    // before vue
-    resolveId(id) {
-      if (moduleIdRE.test(id)) {
-        return "\0" + id;
-      }
-      return void 0;
-    },
-    load: isProd ? prodLoad : devLoad
-  };
+	if (!targetFolder) throw new Error("targetFolder is not defined");
+	return {
+		name: "markdown-examples",
+		enforce: "pre",
+		resolveId(id) {
+			if (moduleIdRE.test(id)) return "\0" + id;
+		},
+		load: isProd ? prodLoad : devLoad
+	};
 }
+
+
 function viteExamplesPlugin({ isProd, path }) {
-  targetFolder = path;
-  return vitePlugin(isProd);
+	targetFolder = path;
+	return vitePlugin(isProd);
 }
 
 const vendorRE = /node_modules[\\/](vue|@vue|quasar|vue-router)[\\/](.*)\.(m?js|css|sass)$/;
 const exampleRE = /examples:([a-zA-Z0-9]+)$|src[\\/]examples[\\/]([a-zA-Z0-9-]+)/;
+
+
 function viteManualChunks(id) {
-  if (vendorRE.test(id)) {
-    return "vendor";
-  }
-  const examplesMatch = exampleRE.exec(id);
-  if (examplesMatch !== null) {
-    const name = examplesMatch[1] || examplesMatch[2];
-    return `e.${name}`;
-  }
-  return void 0;
+	if (vendorRE.test(id)) return "vendor";
+	const examplesMatch = exampleRE.exec(id);
+	if (examplesMatch !== null) return `e.${examplesMatch[1] || examplesMatch[2]}`;
 }
 
-export { viteExamplesPlugin, viteManualChunks };
+export { viteExamplesPlugin, viteManualChunks };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/vite-examples-plugin",
-  "version": "0.1.0-rc.9",
+  "version": "1.1.0",
   "description": "A Vite plugin for @md-plugins for handling imported examples in markdown files.",
   "keywords": [
     "markdown-it",
@@ -41,10 +41,10 @@
     "tinyglobby": "^0.2.17"
   },
   "devDependencies": {
-    "vite": "^8.0.16"
+    "vite": "^8.1.4"
   },
   "scripts": {
-    "build": "unbuild",
+    "build": "obuild && node ../../scripts/ensure-obuild-types.mjs",
     "clean": "rm -rf dist/ node_modules/"
   }
 }