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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +105 -5
  2. package/dist/index.cjs +1 -1
  3. package/package.json +3 -6
  4. package/types.d.ts +15 -9
package/README.md CHANGED
@@ -10,13 +10,13 @@
10
10
 
11
11
  Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Server and Pinegrow apps (currently only Vue Designer).
12
12
 
13
- - [📖  Documentation](https://pinegrow.com/vue-designer)
13
+ - [ Learn more about Vue Designer](https://pinegrow.com/vue-designer)
14
14
 
15
15
  ## Features
16
16
 
17
17
  - 🎨  Visually live-design your Vite-powered apps (Vue, Nuxt, Iles, Astro, etc)
18
18
  - ⚙️  Smartly integrates into your Vite workflow in dev-mode only
19
- - ✨  No lock-in, Pinegrow is an open-tool ❤️
19
+ - ✨  Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️
20
20
 
21
21
  ## Quick Setup
22
22
 
@@ -24,10 +24,10 @@ Pinegrow Vite Plugin enables connection and interaction between your Vite Dev-Se
24
24
 
25
25
  ```bash
26
26
  # Using npm
27
- npm install --save-dev @pinegrow/vite-plugin
27
+ npm install -D @pinegrow/vite-plugin
28
28
 
29
29
  # Using pnpm
30
- pnpm add --save-dev @pinegrow/vite-plugin
30
+ pnpm add -D @pinegrow/vite-plugin
31
31
  ```
32
32
 
33
33
  2. Configure: Add `liveDesigner()` to your Vite Plugins array `vite.config.{ts,js}`
@@ -42,7 +42,7 @@ import { liveDesigner } from '@pinegrow/vite-plugin'
42
42
  export default defineConfig({
43
43
  plugins: [
44
44
  liveDesigner({
45
- //...
45
+ /* LiveDesignerOptions (for more details, refer to Options section below) */
46
46
  }),
47
47
  vue(),
48
48
  //...
@@ -53,6 +53,106 @@ export default defineConfig({
53
53
 
54
54
  Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
55
55
 
56
+ ## Options
57
+
58
+ ```ts
59
+ interface PinegrowExternalPlugin {
60
+ /**
61
+ * Display name in Props Panel and Library Panels
62
+ * Eg, "My Awesome Lib 3.3.1", defaults to key if not provided
63
+ */
64
+ name?: string
65
+ /**
66
+ * Unique key that doesn't conflict with other pinegrow frameworks
67
+ * Run `Object.values(pinegrow.getFrameworks()).map(fx => fx.key)` in Vue Designer's devtools console for existing keys
68
+ *
69
+ * Allowed characters - alphanumeric with hyphens or period, no spaces
70
+ * Eg, 'my-awesome-lib'
71
+ */
72
+ key: string
73
+ /**
74
+ * Web-types of component library (or) pinegrow commonjs plugin
75
+ * Must return an absolute path
76
+ *
77
+ * Use path functions according to the project module type (commonjs/module)
78
+ * For eg, path.resolve(__dirname, '../my-awesome-lib/web-types.json')
79
+ * (or)
80
+ * import { fileURLToPath, URL } from 'node:url'
81
+ * fileURLToPath(new URL('./relative-path/web-types.json', import.meta.url)) // web-types of component library
82
+ * fileURLToPath(new URL('./my-awesome-lib/web-types.json', import.meta.url)) // pinegrow commonjs plugin
83
+ */
84
+ pluginPath: string
85
+ }
86
+
87
+ export interface LiveDesignerOptions {
88
+ /**
89
+ * When your project is part of a mono-repo
90
+ * Absolute path to the root of a monorepo (or)
91
+ * Relative path from the project root to the root of a monorepo.
92
+ */
93
+ repoRoot?: string
94
+
95
+ /**
96
+ * When using a custom config file (for eg, vite-dev.config.js)
97
+ * Absolute path to a custom config file (for eg, vite-dev.config.js) (or)
98
+ * Relative path from the project root to a custom config file (for eg, vite-dev.config.js).
99
+ */
100
+ configPath?: string
101
+
102
+ /**
103
+ * Key of the devtools exposed on the window object.
104
+ * For instructions, check Config Panel > Devtools tab in Vue Designer
105
+ */
106
+ devtoolsKey?: string
107
+
108
+ /**
109
+ * Preferred format for icons in icon-picker - https://github.com/antfu/icones/blob/main/src/utils/case.ts
110
+ * * @default 'unocss' // For eg, i-material-symbols-home
111
+ * When using Nuxt-Icon, you need to change this to 'iconify'
112
+ */
113
+ iconPreferredCase?:
114
+ | 'unocss'
115
+ | 'iconify'
116
+ | 'bare'
117
+ | 'barePascal'
118
+ | 'dash'
119
+ | 'slash'
120
+ | 'doubleHyphen'
121
+ | 'camel'
122
+ | 'pascal'
123
+ | 'component'
124
+ | 'componentKebab'
125
+
126
+ /**
127
+ * Router history modes - 'html5', 'hash'
128
+ * @default 'html5'
129
+ */
130
+
131
+ routerHistoryMode?: string
132
+
133
+ /**
134
+ * Array of Pinegrow plugins (npm package names)
135
+ * 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
136
+ */
137
+ plugins?: PinegrowExternalPlugin[] | string | string[]
138
+
139
+ /**
140
+ * Pinegrow TailwindCSS plugin options
141
+ * For options, refer to https://www.npmjs.com/package/@pinegrow/tailwindcss-plugin
142
+ */
143
+ tailwindcss?: PinegrowTailwindCSSModuleOptions
144
+ }
145
+
146
+ interface PinegrowVitePlugin<VitePluginOption> {
147
+ /**
148
+ * Pinegrow Live Designer options
149
+ */
150
+ liveDesigner?: {
151
+ [key in string]?: any
152
+ } & LiveDesignerOptions
153
+ }
154
+ ```
155
+
56
156
  ## License
57
157
 
58
158
  [MIT License](./LICENSE)