@pinegrow/vite-plugin 3.0.65 → 3.0.66

package/README.md

@@ -1,205 +1,204 @@
-<!-- [![@pinegrow/vite-plugin](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->
-
-# Pinegrow Vite Plugin
-
-[![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 Pinegrow Web Editor & Vue Designer).
-
--   [&nbsp;Learn more about Vue Designer](https://vuedesigner.com)
-
-## 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; Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️
-
-## Quick Setup
-
-1. Install: Add `@pinegrow/vite-plugin` to your project
-
-```bash
-# Using npm
-npm install -D @pinegrow/vite-plugin
-
-# Using pnpm
-pnpm add -D @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({
-			/* LiveDesignerOptions (for more details, refer to Options section below) */
-		}),
-		vue(),
-		//...
-	],
-	//...
-})
-```
-
-Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
-
-## Options
-
-```ts
-interface PinegrowExternalPlugin {
-	/**
-	 * Display name in Props Panel and Library Panels
-	 * Eg, "My Awesome Lib 3.3.1", defaults to key if not provided
-	 */
-	name?: string
-	/**
-	 * Unique key that doesn't conflict with other pinegrow frameworks
-	 * Run `Object.values(pinegrow.getFrameworks()).map(fx => fx.key)` in Vue Designer's devtools console for existing keys
-	 *
-	 * Allowed characters - alphanumeric with hyphens or period, no spaces
-	 * Eg, 'my-awesome-lib'
-	 */
-	key: string
-	/**
-	 * Web-types of component library (or) pinegrow commonjs plugin
-	 * Must return an absolute path
-	 *
-	 * Use path functions according to the project module type (commonjs/module)
-	 * For eg, path.resolve(__dirname, '../my-awesome-lib/web-types.json')
-	 * (or)
-	 * import { fileURLToPath, URL } from 'node:url'
-	 * fileURLToPath(new URL('./web-types/my-awesome-lib.json', import.meta.url)) // pinegrow commonjs plugin
-	 * fileURLToPath(new URL('./my-awesome-lib/web-types.json', import.meta.url)) // pinegrow commonjs plugin
-	 * fileURLToPath(new URL('./relative-path/web-types.json', import.meta.url)) // web-types of component library
-	 */
-	pluginPath: string
-}
-
-export interface LiveDesignerOptions {
-	/**
-	 * When your project is part of a mono-repo
-	 * Absolute path to the root of a monorepo (or)
-	 * Relative path from the project root to the root of a monorepo.
-	 */
-	repoRoot?: string
-
-	/**
-	 * When using a custom config file (for eg, vite-dev.config.js)
-	 * Absolute path to a custom config file (for eg, vite-dev.config.js) (or)
-	 * 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 > Devtools tab in Vue Designer
-	 */
-	devtoolsKey?: string
-
-	/**
-	 * Mapping of custom folder setup that deviates from the standard project setup of the framework/meta-framework
-	 * For eg, in Vitepress, the standard folders could be re-mapped outside the .vitepress folder.
-	 * Vue Designer utilizes this information when a user intends to create a new component from the page tree or the Vue menu.
-	 */
-	dirs?: {
-		src?: string
-		components?: string
-		pages?: string
-		layouts?: string
-	}
-
-	/**
-   * By default, one among the pages and components following these naming conventions is opened automatically as the startup page - ['Hero*', 'app', 'App', 'home', 'Home', 'index', 'Index', 'welcome', 'Welcome'].
-
-    To open a specific page or component as the default startup page, configure the startupPage key in your liveDesigner config.
-	 * For eg '@/Pages/Welcome.vue',
-	 * For eg './resources/js/Pages/Welcome.vue',
-	 */
-	startupPage?: string
-
-	/**
-	 * Dev-server URLs.
-	 * The local URL is set to the application URL, when Vite is used as a middleware in certain setups, such as Laravel applications.
-	 * The network URL is set when when the dev-server is running on a remote server/machine.
-	 * Make sure the URLs are fixed via the CLI configurations, so that the next available port is not auto-picked if the fixed URL's port was already used by some other process. For Vite, use the `server.host` & `server.port` options for Vite - https://vitejs.dev/config/server-options.html#server-options).
-	 */
-	devServerUrls?: {
-		local?: string
-		network?: string
-	}
-
-	/**
-	 * Preferred format for icons in icon-picker - https://github.com/antfu/icones/blob/main/src/utils/case.ts
-	 * * @default 'unocss' // For eg, i-material-symbols-home
-	 * * When using Nuxt-Icon, you need to change this to 'iconify'
-	 *
-	 */
-	iconPreferredCase?:
-		| 'unocss'
-		| 'iconify'
-		| 'bare'
-		| 'barePascal'
-		| 'dash'
-		| 'slash'
-		| 'doubleHyphen'
-		| 'camel'
-		| 'pascal'
-		| 'component'
-		| 'componentKebab'
-
-	/**
-	 * Router history modes - 'html5', 'hash'
-	 * @default 'html5'
-	 */
-
-	routerHistoryMode?: string
-
-	/**
-	 * 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')] as pluginPath, along with a unique key
-	 */
-	plugins?: PinegrowExternalPlugin[] | string | string[]
-
-	/**
-	 * Pinegrow TailwindCSS plugin options
-	 * For options, refer to https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin
-	 */
-	tailwindcss?: PinegrowTailwindCSSModuleOptions
-	vuetify?: PinegrowVuetifyModuleOptions
-}
-
-interface PinegrowVitePlugin<VitePluginOption> {
-	/**
-	 * Pinegrow Live Designer options
-	 */
-	liveDesigner?: {
-		[key in string]?: any
-	} & LiveDesignerOptions
-}
-```
-
-## 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
-
+<!-- [![@pinegrow/vite-plugin](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->
+
+# Pinegrow Vite Plugin
+
+[![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 Pinegrow Web Editor & Vue Designer).
+
+-   [&nbsp;Learn more about Vue Designer](https://vuedesigner.com)
+
+## Features
+
+-   🎨&nbsp; Visually live-design your Vite-powered apps (Vue, Nuxt, Quasar, Iles, Astro, etc)
+-   ⚙️&nbsp; Smartly integrates into your Vite workflow in dev-mode only
+-   ✨&nbsp; Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️
+
+## Quick Setup
+
+1. Install: Add `@pinegrow/vite-plugin` to your project
+
+```bash
+# Using npm
+npm install -D @pinegrow/vite-plugin
+
+# Using pnpm
+pnpm add -D @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({
+			/* LiveDesignerOptions (for more details, refer to Options section below) */
+		}),
+		vue(),
+		//...
+	],
+	//...
+})
+```
+
+Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
+
+## Options
+
+```ts
+interface PinegrowExternalPlugin {
+	/**
+	 * Display name in Props Panel and Library Panels
+	 * Eg, "My Awesome Lib 3.3.1", defaults to key if not provided
+	 */
+	name?: string
+	/**
+	 * Unique key that doesn't conflict with other pinegrow frameworks
+	 * Run `Object.values(pinegrow.getFrameworks()).map(fx => fx.key)` in Vue Designer's devtools console for existing keys
+	 *
+	 * Allowed characters - alphanumeric with hyphens or period, no spaces
+	 * Eg, 'my-awesome-lib'
+	 */
+	key: string
+	/**
+	 * Web-types of component library (or) pinegrow commonjs plugin
+	 * Must return an absolute path
+	 *
+	 * Use path functions according to the project module type (commonjs/module)
+	 * For eg, path.resolve(__dirname, '../my-awesome-lib/web-types.json')
+	 * (or)
+	 * import { fileURLToPath, URL } from 'node:url'
+	 * fileURLToPath(new URL('./web-types/my-awesome-lib.json', import.meta.url)) // pinegrow commonjs plugin
+	 * fileURLToPath(new URL('./my-awesome-lib/web-types.json', import.meta.url)) // pinegrow commonjs plugin
+	 * fileURLToPath(new URL('./relative-path/web-types.json', import.meta.url)) // web-types of component library
+	 */
+	pluginPath: string
+}
+
+export interface LiveDesignerOptions {
+	/**
+	 * When your project is part of a mono-repo
+	 * Absolute path to the root of a monorepo (or)
+	 * Relative path from the project root to the root of a monorepo.
+	 */
+	repoRoot?: string
+
+	/**
+	 * When using a custom config file (for eg, vite-dev.config.js)
+	 * Absolute path to a custom config file (for eg, vite-dev.config.js) (or)
+	 * 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 > Devtools tab in Vue Designer
+	 */
+	devtoolsKey?: string
+
+	/**
+	 * Mapping of custom folder setup that deviates from the standard project setup of the framework/meta-framework
+	 * For eg, in Vitepress, the standard folders could be re-mapped outside the .vitepress folder.
+	 * Vue Designer utilizes this information when a user intends to create a new component from the page tree or the Vue menu.
+	 */
+	dirs?: {
+		src?: string
+		components?: string
+		pages?: string
+		layouts?: string
+	}
+
+	/**
+   * By default, one among the pages and components following these naming conventions is opened automatically as the startup page - ['Hero*', 'app', 'App', 'home', 'Home', 'index', 'Index', 'welcome', 'Welcome'].
+
+    To open a specific page or component as the default startup page, configure the startupPage key in your liveDesigner config.
+	 * For eg '@/Pages/Welcome.vue',
+	 * For eg './resources/js/Pages/Welcome.vue',
+	 */
+	startupPage?: string
+
+	/**
+	 * Dev-server URLs.
+	 * The local URL is set to the application URL, when Vite is used as a middleware in certain setups, such as Laravel applications.
+	 * The network URL is set when when the dev-server is running on a remote server/machine.
+	 * Make sure the URLs are fixed via the CLI configurations, so that the next available port is not auto-picked if the fixed URL's port was already used by some other process. For Vite, use the `server.host` & `server.port` options for Vite - https://vitejs.dev/config/server-options.html#server-options).
+	 */
+	devServerUrls?: {
+		local?: string
+		network?: string
+	}
+
+	/**
+	 * Preferred format for icons in icon-picker - https://github.com/antfu/icones/blob/main/src/utils/case.ts
+	 * * @default 'unocss' // For eg, i-material-symbols-home
+	 * * When using Nuxt-Icon, you need to change this to 'iconify'
+	 *
+	 */
+	iconPreferredCase?:
+		| 'unocss'
+		| 'iconify'
+		| 'bare'
+		| 'barePascal'
+		| 'dash'
+		| 'slash'
+		| 'doubleHyphen'
+		| 'camel'
+		| 'pascal'
+		| 'component'
+		| 'componentKebab'
+
+	/**
+	 * Router history modes - 'html5', 'hash'
+	 * @default 'html5'
+	 */
+
+	routerHistoryMode?: string
+
+	/**
+	 * 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')] as pluginPath, along with a unique key
+	 */
+	plugins?: PinegrowExternalPlugin[] | string | string[]
+
+	/**
+	 * Pinegrow TailwindCSS plugin options
+	 * For options, refer to https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin
+	 */
+	tailwindcss?: PinegrowTailwindCSSModuleOptions
+	vuetify?: PinegrowVuetifyModuleOptions
+}
+
+interface PinegrowVitePlugin<VitePluginOption> {
+	/**
+	 * Pinegrow Live Designer options
+	 */
+	liveDesigner?: {
+		[key in string]?: any
+	} & LiveDesignerOptions
+}
+```
+
+## 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.65",
+	"version": "3.0.66",
 	"description": "Pinegrow Vite Plugin",
 	"type": "module",
 	"files": [