@pinegrow/vite-plugin 3.0.0-beta.144 → 3.0.0-beta.145

package/README.md

@@ -10,13 +10,13 @@
 
 Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Vue Designer).
 
--   [📖  Documentation](https://pinegrow.com/vue-designer)
+-   [ Learn more about Vue Designer](https://pinegrow.com/vue-designer)
 
 ## Features
 
 -   🎨  Visually live-design your Vite-powered apps (Vue, Nuxt, Iles, Astro, etc)
 -   ⚙️  Smartly integrates into your Vite workflow in dev-mode only
--   ✨  No lock-in, Pinegrow is an open-tool ❤️
+-   ✨  Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️
 
 ## Quick Setup
 
@@ -24,10 +24,10 @@ Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Se
 
 ```bash
 # Using npm
-npm install --save-dev @pinegrow/vite-plugin
+npm install -D @pinegrow/vite-plugin
 
 # Using pnpm
-pnpm add --save-dev @pinegrow/vite-plugin
+pnpm add -D @pinegrow/vite-plugin
 ```
 
 2. Configure: Add `liveDesigner()` to your Vite Plugins array `vite.config.{ts,js}`
@@ -42,7 +42,7 @@ import { liveDesigner } from '@pinegrow/vite-plugin'
 export default defineConfig({
 	plugins: [
 		liveDesigner({
-			//...
+			/* LiveDesignerOptions (for more details, refer to Options section below) */
 		}),
 		vue(),
 		//...
@@ -53,6 +53,106 @@ export default defineConfig({
 
 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('./relative-path/web-types.json', import.meta.url)) // web-types of component library
+	 * fileURLToPath(new URL('./my-awesome-lib/web-types.json', import.meta.url)) // pinegrow commonjs plugin
+	 */
+	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
+
+	/**
+	 * 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
+}
+
+interface PinegrowVitePlugin<VitePluginOption> {
+	/**
+	 * Pinegrow Live Designer options
+	 */
+	liveDesigner?: {
+		[key in string]?: any
+	} & LiveDesignerOptions
+}
+```
+
 ## License
 
 [MIT License](./LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pinegrow/vite-plugin",
-	"version": "3.0.0-beta.144",
+	"version": "3.0.0-beta.145",
 	"description": "Pinegrow Vite Plugin",
 	"type": "module",
 	"files": [

package/types.d.ts

@@ -1,3 +1,5 @@
+// https://pinegrow.com/vue-designer
+
 import type { PinegrowTailwindCSSModuleOptions } from '@pinegrow/tailwindcss-plugin'
 import type { PluginOption as VitePluginOption } from 'vite'
 
@@ -20,46 +22,50 @@ interface PinegrowExternalPlugin {
 	 * Must return an absolute path
 	 *
 	 * Use path functions according to the project module type (commonjs/module)
-	 * For eg, path.resolve(__dirname, '../relative-path/my-lib.cjs')
+	 * For eg, path.resolve(__dirname, '../my-awesome-lib/web-types.json')
 	 * (or)
 	 * import { fileURLToPath, URL } from 'node:url'
 	 * fileURLToPath(new URL('./relative-path/web-types.json', import.meta.url)) // web-types of component library
-	 * fileURLToPath(new URL('./relative-path/my-lib.cjs', import.meta.url)) // pinegrow commonjs plugin
+	 * fileURLToPath(new URL('./my-awesome-lib/web-types.json', import.meta.url)) // pinegrow commonjs plugin
 	 */
 	pluginPath: string
 }
 
 export interface LiveDesignerOptions {
 	/**
-	 * Absolute path to the root of a monorepo.
+	 * 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
 
 	/**
-	 * Absolute path to a custom config file (for eg, vite-dev.config.js).
+	 * 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 in Vue Designer
+	 * For instructions, check Config Panel > Devtools tab in Vue Designer
 	 */
 	devtoolsKey?: string
 
 	/**
 	 * Preferred format for icons in icon-picker - https://github.com/antfu/icones/blob/main/src/utils/case.ts
-	 * To see the different formats, go to https://icones.js.org/collection/mdi, turn off name copying mode if active, select an icon. In the bottom drawer, next to the icon-name & copy icon, there is dropup icon. Click the drop-up to see the different formats.
 	 * * @default 'unocss' // For eg, i-material-symbols-home
+	 * * When using Nuxt-Icon, you need to change this to 'iconify'
 	 *
 	 */
 	iconPreferredCase?:
 		| 'unocss'
+		| 'iconify'
 		| 'bare'
 		| 'barePascal'
-		| 'iconify'
 		| 'dash'
+		| 'slash'
+		| 'doubleHyphen'
 		| 'camel'
 		| 'pascal'
 		| 'component'
@@ -70,7 +76,7 @@ export interface LiveDesignerOptions {
 	 * @default 'html5'
 	 */
 
-	routerHistoryMode?: string //
+	routerHistoryMode?: string
 
 	/**
 	 * Array of Pinegrow plugins (npm package names)
@@ -80,6 +86,7 @@ export interface LiveDesignerOptions {
 
 	/**
 	 * Pinegrow TailwindCSS plugin options
+	 * For options, refer to https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin
 	 */
 	tailwindcss?: PinegrowTailwindCSSModuleOptions
 }
@@ -87,7 +94,6 @@ export interface LiveDesignerOptions {
 interface PinegrowVitePlugin<VitePluginOption> {
 	/**
 	 * Pinegrow Live Designer options
-	 * For details, check https://pinegrow.com/vue-designer
 	 */
 	liveDesigner?: {
 		[key in string]?: any