Excited to announce that UXP plugin dev just got way faster with Bolt UXP our new boilerplate for building UXP plugins with React, Svelte or Vue built on Vite + TypeScript + Sass.
Bolt UXP comes packed with useful features for developers like:
CLI Quick Starter
Instant Hot-reloading
TypeScript definitions
CCX & ZIP packaging
C++ Hybrid Plugin setup
and more!
You can get started today with yarn create bolt-uxp
and follow the CLI starter to pick your framework, apps, and everything else you need.
Bolt UXP is totally free and open-source, so give it a try and let me know how you like it!
Huge thanks to @pkrishna @Erin_Finnegan @Ingo @amandah and the rest of the UXP team for having me demo Bolt UXP on the office hours today!
9 Likes
Thanks for including Vue - I look forward to giving this a spin!
1 Like
Awesome, let me know how it goes!
Wanted to show some love here as well. I was having a hell of a time getting Svelte + Typescript + UXP + Hot Reload + Webpack all working together, and this just worked out of the box. Hot reload and everything. Thank you so much!
PS: I noticed that the cc-ext-uxp-types dependency is pointing to your fork instead of adobes. Does adobes official one not work?
1 Like
Awesome to hear! If you end up publishing any plugins with Bolt, let us know in our Discord , we like to repost them on our socials.
Yes the fork of cc-ext-uxp-types
is temporary until the Adobe one has some fixes:
opened 04:13PM - 05 Dec 23 UTC
Setup Types need to be corrected so that:
- Panels and Commands should be keyed… by string values (e.g. the id)
- All methods are optional
- menuItems has all optional parameters
- Additionally argument types need to be specified.
Here is an example of what it should look like:
```ts
setup(entrypoints: {
plugin?: {
create?: (...params: any[]) => any;
destroy?: (...params: any[]) => any;
};
panels?: {
[key:string]:{
create?: (rootNode: HTMLElement) => any;
show?: (rootNode: HTMLElement, data: any) => any;
hide?: (rootNode: HTMLElement, data: any) => any;
destroy?: (rootNode: HTMLElement) => any;
invokeMenu?: (id: string) => any;
customEntrypoint?: (...params: any[]) => any;
menuItems?: {
id: string;
label: string;
enabled?: boolean;
checked?: boolean;
submenu?: any[];
}[];
};
};
commands?: {
[key:string]:{
run: (...params: any[]) => any;
cancel?: (...params: any[]) => any;
};
};
}): void;
```