@pinegrow/vite-plugin 3.0.0-beta.110 → 3.0.0-beta.112

package/README.md

@@ -1,6 +1,70 @@
-# @pinegrow/vite-plugin
+<!-- [![@pinegrow/vite-plugin](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->
 
-## Pinegrow Vite Plugin
+# Pinegrow Vite Plugin
 
-http://www.pinegrow.com
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+
+[Vite](https://vitejs.dev) plugin for [Pinegrow](https://pinegrow.com) ⚡️
+
+Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Vue Designer)."
+
+-   [📖 &nbsp;Documentation](https://pinegrow.com/vue-designer)
+
+## Features
+
+-   🎨&nbsp; Visually live-design your Vite-powered apps (Vue, Nuxt, Iles, Astro, etc)
+-   ⚙️&nbsp; Smartly integrates into your Vite workflow in dev-mode only
+-   ✨&nbsp; No lock-in, Pinegrow is an open-tool ❤️
+
+## Quick Setup
+
+1. Install: Add `@pinegrow/vite-plugin` to your project
+
+```bash
+# Using npm
+npm install --save-dev @pinegrow/vite-plugin
+
+# Using pnpm
+pnpm add --save-dev @pinegrow/vite-plugin
+```
+
+2. Configure: Add `liveDesigner()` to your Vite Plugins array `vite.config.{ts,js}`
+
+```js
+//vite.config.js (or) vite.config.ts
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { liveDesigner } from '@pinegrow/vite-plugin'
+
+export default defineConfig({
+	plugins: [
+		liveDesigner({
+			//...
+		}),
+		vue(),
+		//...
+	],
+	//...
+})
+```
+
+Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
+
+## License
+
+[MIT License](./LICENSE)
+
+Copyright (c) Pinegrow
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/vite-plugin/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@pinegrow/vite-plugin
+[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/vite-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@pinegrow/vite-plugin
+[license-src]: https://img.shields.io/npm/l/@pinegrow/vite-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://npmjs.com/package/@pinegrow/vite-plugin
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pinegrow/vite-plugin",
-	"version": "3.0.0-beta.110",
+	"version": "3.0.0-beta.112",
 	"description": "Pinegrow Vite Plugin",
 	"type": "module",
 	"files": [
@@ -28,8 +28,8 @@
 	},
 	"keywords": [
 		"pinegrow",
-		"pinegrow-plugin",
-		"vite plugin",
+		"vue-designer",
+		"vite-plugin",
 		"@pinegrow/vite-plugin"
 	],
 	"author": "Pinegrow (http://pinegrow.com/)",

package/types.d.ts

@@ -3,82 +3,63 @@ import type { Options as AutoImportComponentsOptions } from 'unplugin-vue-compon
 import type { Options as AutoImportAPIsOptions } from 'unplugin-auto-import/types'
 
 interface Options {
-	repoRoot?: string // relative path from the project root to the root of the monorepo
+	/**
+	 * Absolute path to the root of a monorepo.
+	 * Relative path from the project root to the root of a monorepo.
+	 */
+	repoRoot?: string
 
-	configPath?: string // relative path from project root to the custom config file when it's not auto-detected, for eg, './my-config.dev.js' or './docs/my-config.dev.js', defaults to viteServer.config.configFile
-
-	// pinegrow plugins
-	plugins?: string[]
-
-	// User can override the themePath in the plugin's options
-	// {
-	//   key: 'vuetify',
-	//   pluginPath: '...',
-	//   options: {
-	//     themePath: './src/themes' // directory or file, for eg, './src/themes/my-pg-theme.cjs'
-	//   }
-	// }
+	/**
+	 * Absolute path to a custom config file (for eg, vite-dev.config.js).
+	 * Relative path from the project root to a custom config file (for eg, vite-dev.config.js).
+	 */
+	configPath?: string
 
+	/**
+	 * Key of the devtools exposed on the window object.
+	 * For instructions, check Config Panel in Vue Designer
+	 */
 	devtoolsKey?: string
-	// vscodeTunnelUrl?: string
 
-	// routerHistoryMode?: string // 'hash', 'html5' (default)
+	/**
+	 * Router history modes - 'html5', 'hash'
+	 * @default 'html5'
+	 */
 
-	// Adds to package.json, used when a package was installed (available in lock file) probably as a peer dependency, so not available in package.json
-	// mergeWithPackageJson?: {
-	// 	dependencies?: {}
-	// 	devDependencies?: {
-	// 		// vite: string;
-	// 	}
-	// }
+	routerHistoryMode?: string //
 
-	customTypes?: {
-		// To apply type overrides to a specific component (overrides above default fn),
-		// ComponentName: { prop: { customType: 'icon' } },
-		// VRating: {
-		//   ripple: {
-		//     customType: "boolean";
-		//   };
-		// };
-		// VSelect: {
-		// 	variant: {
-		// 		customType: 'select',
-		// 		options: ['plain', 'outlined', 'underlined', 'solo'],
-		// 		default: ''
-		// 	},
-		// 	density: {
-		// 		customType: 'select',
-		// 		options: ['default', 'compact', 'comfortable']
-		// 	},
-		// 	disabled: {
-		// 		customType: 'boolean'
-		// 	},
-		// 	appendIcon: {
-		// 		customType: 'icon'
-		// 	},
-		// }
-		// To apply type overrides to all components,
-		// all: { prop: { customType: 'icon' } },
-		defaultTypes?: {
-			// density: {
-			//   customType: "select";
-			//   // add options when customType is 'select'
-			//   options: ["default", "compact", "comfortable"];
-			// };
-		}
-	}
+	/**
+	 * Array of Pinegrow plugins (npm package names)
+	 * To use file-based Pinegrow Plugins, provide the absolute path of the plugin file, for eg, [path.resolve(__dirname, './pg-plugin/index.js')]
+	 */
+	plugins?: string[]
 
+	/**
+	 * Pinegrow TailwindCSS plugin options
+	 */
 	tailwindcss?: PinegrowTailwindCSSPluginOptions
-
-	autoImportComponents?: AutoImportComponentsOptions
-
-	autoImportAPIs?: AutoImportAPIsOptions
 }
 
 interface PinegrowVitePlugin {
+	/**
+	 * Pinegrow Live Designer options
+	 * For details, check https://pinegrow.com/vue-designer
+	 */
 	liveDesigner?: {
 		[key in string]?: any
 	} & Options
+
+	/**
+	 * unplugin-vue-components options for auto-importing local components and via resolvers
+	 * For details, check https://github.com/antfu/unplugin-vue-components#configuration
+	 */
+	autoImportComponents?: AutoImportComponentsOptions
+
+	/**
+	 * unplugin-auto-import options for auto-importing APIs using presets
+	 * For details, check https://github.com/antfu/unplugin-auto-import#configuration
+	 */
+	autoImportAPIs?: AutoImportAPIsOptions
 }
 
 declare function export_default(liveDesigner: Options): PinegrowVitePlugin