bombino-quasar-slim

Template used in bombino

Templated from Inner-Joystick, containing the functionality and toolbar/footer style:

NOTE: This repo should not be git cloned directly because it has breaking placeholder values and will not run on it's own.

# Node and bombino are required
npm install -g bombino

# In any valid CEP extension folder:
# (e.g. <USERNAME>/AppData/Roaming/CEP/extensions)
bombino

No setup required for:

• Vue as JS framework
• Hot Reloading (panel updates instantly on every save during npm run serve)
• Quasar as CSS framework
• Quasar-CLI as Node.js tooling (webkit)
• Paginations via Vue Router
• State management with Vuex
• Support for additional ModalDialog extension sharing same app root as panel
• 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)
• Full Material Design Icon support
• 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 ✨

Never used Node, Vue CLI-3 or Webpack?

---

Commands

This panel comes with 5 commands baked in (see details here):

• 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).

📁 your-panel-name
  |__ :file_folder: CSXS
         |__ :page_facing_up: manifest.xml
  |__ :file_folder: src
         |__ :file_folder: components
                |__ :file_folder: main (utility)
         |__ :file_folder: host (.jsx and scripting files)
         |__ :file_folder: layouts (Router layouts)
         |__ :file_folder: pages (Router content to be inside layouts)
         |__ :file_folder: plugins (Vue-CLI-3 plugins)
         |__ :file_folder: router
         |__ :page_facing_up: App.vue
         |__ :page_facing_up: index-dev.html (Development: used with npm run serve)
  |__ :page_facing_up: .debug
  |__ :page_facing_up: .gitignore
  |__ :page_facing_up: package.json
  |__ :page_facing_up: package-lock.json

---

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

  <Resources>
    <MainPath>./public/index-dev.html</MainPath>
    <!-- <MainPath>./dist/index.html</MainPath> -->

• 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

  <Resources>
    <!-- <MainPath>./public/index-dev.html</MainPath> -->
    <MainPath>./dist/index.html</MainPath>

• 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

📁 ./src/components
  |__ :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

---

Scripting

📁 ./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:

📁 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 <div> of #app. Add your own components inside it instead of modifying it directly.

---

Common errors:

require is not a function/defined (fixed)

• If wanting to use require() or process in both Developer and Production, you need to assign them manually in each .vue file (due to being nested in an iframe) like so:

const require = cep_node.require || require;
const fs = require("fs"); // Now available in both

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.