https://github.com/inventsable/bombino-vue-basic
Template for a basic CEP panel with Vue-CLI using bombino
https://github.com/inventsable/bombino-vue-basic
Last synced: about 7 hours ago
JSON representation
Template for a basic CEP panel with Vue-CLI using bombino
- Host: GitHub
- URL: https://github.com/inventsable/bombino-vue-basic
- Owner: Inventsable
- Created: 2019-11-06T04:48:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-23T00:23:02.000Z (over 4 years ago)
- Last Synced: 2025-07-06T22:08:22.379Z (9 months ago)
- Language: JavaScript
- Size: 221 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bombino-vue-basic
## Template used in [bombino](https://github.com/Inventsable/bombino)
> **NOTE:** This repo should not be `git clone`d directly because it has breaking placeholder values and will not run on it's own.
```bash
# Node and bombino are required
npm install -g bombino
# In any valid CEP extension folder:
# (e.g. /AppData/Roaming/CEP/extensions)
bombino
```
## No setup required for:
- [Vue](https://vuejs.org/) as JS framework
- Hot Reloading (panel updates instantly on every save during `npm run serve`)
- [Vue-CLI-3](https://cli.vuejs.org/) as Node.js tooling (webkit)
- Full typescript support for any app with pravdomil's Adobe types (same as writing .jsx scripts but access to host DOM as autocomplete while typing)
- Various personal utility components that handle context/flyout menus, launching CEF debug, common errors with Webpack, matching all host app styles and more
- ✨ [All color themes of any host app automatically handled by starlette library](https://github.com/Inventsable/starlette) ✨
## [Never used Node, Vue CLI-3 or Webpack?](#Getting-Started)
---
## Commands
This panel comes with 5 commands baked in ([see details here](https://github.com/Inventsable/CEP-Self-Signing-Panel#what-do-they-do)):
- `npm run help` - A full list of the commands available and descriptions.
- `npm run switch` - Reports whether in developer or production context and can switch automatically.
- `npm run update` - Reports current version of panel in manifest and prompts to update Major, Minor, or Micro.
- `npm run register` - Reports the current user data (if any) and prompts to save new info to be used in certificates.
- `npm run sign` - Automatically stages and signs the extension, placing it in a `./archive` directory within the current panel.
---
## Filetree for panel:
Base panel results in clean and simple Single File Component infrastructure. `CSInterface` exists on the level of `App.vue` and is accessible anywhere via `this.app.csInterface` (`this.$root.$children[0].csInterface`).
:file_folder: your-panel-name
|\_\_ :file_folder: CSXS
|\_\_ :page_facing_up: manifest.xml
|\_\_ :file_folder: public
|\_\_ :page_facing_up: CSInterface.js
|\_\_ :page_facing_up: index.html (**Production:** used with `npm run build`)
|\_\_ :page_facing_up: index-dev.html (**Development:** used with `npm run serve`)
|\_\_ :file_folder: src
|\_\_ :file_folder: [components](#components)
|\_\_ :file_folder: main (utility)
|\_\_ :page_facing_up: HelloWorld.vue
|\_\_ :file_folder: [host (.jsx and scripting files)](#scripting)
|\_\_ :file_folder: plugins (Vue-CLI-3 plugins)
|\_\_ :page_facing_up: App.vue
|\_\_ :page_facing_up: main.js
|\_\_ :page_facing_up: .debug
|\_\_ :page_facing_up: .gitignore
|\_\_ :page_facing_up: package.json
|\_\_ :page_facing_up: package-lock.json
|\_\_ :page_facing_up: vue.config.js (Avoids `file not found` errors in `index.html` after `npm run build`)
---
## Contexts
You can automate this by using `npm run switch`. In case you need to do it manually:
### For development
- Ensure `index-dev.html` is uncommented in `CSXS/manifest.xml`
```xml
./public/index-dev.html
```
- Run `npm run serve` in the terminal at the project root
- Launch host application and find in Window > Extensions
> Panel now updates in real time and recompiles every time you save in VSCode
### For production
- Ensure `dist/index.html` is uncommented in `CSXS/manifest.xml`
```xml
./dist/index.html
```
- Run `npm run build` in the terminal at the project root
- Launch host application and find in Window > Extensions
> Panel is now ready to sign and certify or be used on any client
---
## Components
:file_folder: ./src/components
|\_\_ :page_facing_up: HelloWorld.vue (main `route` defined in `./src/router.js`)
|\_\_ :file_folder: main (utilities)
|\_\_ :page_facing_up: identity.vue
• Collects extension name, version, localhost and all attributes
• Collects all accessible information about host environment
|\_\_ :page_facing_up: menus.vue
• JSON structures for context and flyout menu
• Unified event callbacks
• Both menus are updated in realtime whenever modified
|\_\_ :page_facing_up: stylizer.vue
• Collects application theme and dresses extension accordingly
• Reassigns CSS variables to handle any future theme changes
|\_\_ :page_facing_up: version.vue
• Displays current version of extension as a footer at bottom of panel
---
## Scripting
:file_folder: ./src/host
|\_\_ :file_folder: universal (Preloaded before main script)
|\_\_ :page_facing_up: Console.jsx
• Support for `console.log()` and `CSEvents` in .jsx files
|\_\_ :page_facing_up: json2.jsx
• Support for `JSON.stringify()` and `JSON.parse()` in .jsx files
|\_\_ :file_folder: ILST (optional)
|\_\_ :page_facing_up: host.ts
• Out of the box support for host DOM in autocomplete
• Changes to this file compile to `host.jsx` on every save
|\_\_ :page_facing_up: host.jsx
• No need to edit or touch this file
• This is the file to run from any CEP/JS
|\_\_ :page_facing_up: tsconfig.json
• Run `tsc: watch - ./src/host/ILST/tsconfig.json` for DOM and autocompile on save
|\_\_ :file_folder: AEFT (optional)
|\_\_ :page_facing_up: host.ts
|\_\_ :page_facing_up: host.jsx
|\_\_ :page_facing_up: tsconfig.json
|\_\_ :file_folder: PHXS (optional)
|\_\_ :page_facing_up: host.ts
|\_\_ :page_facing_up: host.jsx
|\_\_ :page_facing_up: tsconfig.json
---
## Getting Started
You don't need to understand Node, npm packages, Vue CLI-3 or webpack to use these templates, it's a good starting point to avoid all the pitfalls in having your own functional panel using them.
I was very overwhelmed when I first jumped to Single File Components rather than using Vue's CDN and writing everything in one .js file. Afterall, this looks gigantic and there are a ton of cryptic files, but after some practice and troubleshooting how to setup the environment, it's incredibly powerful to use and can be much simpler than gigantic .js files with 10k+ worth of code!
For the most part, you don't need to alter or modify any file/folder not shown below:
:file_folder: your-panel-name
|\_\_ :file_folder: CSXS
|\_\_ :page_facing_up: manifest.xml
• Changes have been made to include node context. See the README in `./CSXS`
|\_\_ :file_folder: public
• Any files/folders contained here will be automatically bundled in `./dist/` after `npm run build`
• You can include any assets (.pngs, scripts, etc) here or `src` for use in the panel
|\_\_ :page_facing_up: CSInterface.js
|\_\_ :page_facing_up: index.html (**Production:** used with `npm run build`)
|\_\_ :page_facing_up: index-dev.html (**Development:** used with `npm run serve`)
|\_\_ :file_folder: src
• This is your development folder, you can place any number of components or files here
|\_\_ :file_folder: components
|\_\_ :page_facing_up: HelloWorld.vue
• This is a placeholder component for the main content of your panel
|\_\_ :page_facing_up: App.vue
• This is the main entry point of your panel
• You cannot change this from a `
` of `#app`. Add your own components inside it instead of modifying it directly.
---
## Common errors:
### Panel is not updating
- Adding or reorganizing components may cause hot reloading to fail. Many times you will be warned of this in `CEF debug`'s console, fix this by hitting `^C` in your active terminal to `Terminae batch job`, then run `npm run serve` once more and refresh the panel.
### Page Not Found (cannot find page at `localhost:####` displays in panel)
- Must run `npm run serve` and have the `App running at: -Local / -Network` message in your terminal
- If you launched the app before running `npm run serve`, click the localhost URL inside the panel's error message
### Panel is white or blank
- Check your CEF client via `localhost:####` for an error thrown in your code which breaks the panel's rendering
- If in `Production` context and receiving `404` errors in your `index.html`, ensure your `dist/index.html`'s script tags have `src` attributes such as `src=./filepath` or `src=filepath` instead of `src=/filepath` (leading slash is default but will break, should be fixed via `vue.config.js`)
### Sign/Certify is failing
- Including hidden files and repositories in your ZXP/ZIP will cause a misleading error message. Be sure to delete hidden items such as `node_modules/`, `.git/`, and any other hidden files/folders prior to your sign/certify.