This takes the work created for the 13th Age compendium browser and ports it to work in the Compendium Browser module.
I haven't removed anything related to the original compendium browser yet, as it was helpful to have it as a comparison while porting the templates and logic.
Done
[x] Got Vue builds working with Vite
[x] Added the new Application and added buttons via Foundry hooks to access it
[x] Added the following components which are functional: CompendiumBrowser (main component), CompendiumBrowserCreatures (NPCs), Tab, Tabs.
[x] CompendiumBrowserCreatures has been updated to use the same markup structure as the old compendium browser, but the other components have not.
[x] Added helper methods, such as replacing module art on actors and pulling up their sheets.
To-Do
[ ] Implement other tabs, like spells, feats, and items
[ ] Abstract the browser so that it can work with any system if a provider is implemented
[ ] Clean up the build process so that there's not separate Vite and Rollup/Gulp configs
[ ] Remove the old browser
[ ] Clean up obsolete hooks (async calls, etc.)
[ ] Linting and formatting
Notes
Can be built with npm run vite:build or watched with npm run vite:watch. This should be done prior to the usual npm run build command. The vite:watch task can be run simultaneously with build:watch without any issues.
Vite output is compiled to src/components/ and includes both the compiled Vue components and a styles.vue.css file that's used for any styling included in their component files. These should be included in the .gitignore since they're compiled.
Vue is installed via npm, but it needs to be copied from node_modules/vue/dist/vue.esm-browser.js to the src/lib/ directory. I've done this manually for now, but it should be added as a build step as well to make it easier to update. There's also a vue.esm-browser.prod.js file that's minified (but doesn't allow the Vue dev tools extension to work) so I would recommend adding something like a build:prod task that can have it be used rather than the non-minified version for actual released builds.
The application class for the compendium browser needs to reference the compiled version of the components, and it also needs a small HTML template (under src/templates/vue-compendium-browser.html) that it can use as a mount point for the components.
Everything Vue related lives under src/vue/.
Foundry's global methods and classes can work inside components, but if you want to use them in the <template> tags, you'll need to make sure they're exposed in the setup() method of the component. See the CompendiumBrowserCreatures component for an example, as it exposes both the global CONFIG and game objects.
This takes the work created for the 13th Age compendium browser and ports it to work in the Compendium Browser module.
I haven't removed anything related to the original compendium browser yet, as it was helpful to have it as a comparison while porting the templates and logic.
Done
To-Do
Notes
npm run vite:buildor watched withnpm run vite:watch. This should be done prior to the usualnpm run buildcommand. Thevite:watchtask can be run simultaneously withbuild:watchwithout any issues.src/components/and includes both the compiled Vue components and astyles.vue.cssfile that's used for any styling included in their component files. These should be included in the .gitignore since they're compiled.node_modules/vue/dist/vue.esm-browser.jsto thesrc/lib/directory. I've done this manually for now, but it should be added as a build step as well to make it easier to update. There's also avue.esm-browser.prod.jsfile that's minified (but doesn't allow the Vue dev tools extension to work) so I would recommend adding something like abuild:prodtask that can have it be used rather than the non-minified version for actual released builds.src/templates/vue-compendium-browser.html) that it can use as a mount point for the components.src/vue/.<template>tags, you'll need to make sure they're exposed in thesetup()method of the component. See theCompendiumBrowserCreaturescomponent for an example, as it exposes both the globalCONFIGandgameobjects.