cep-vue-cli-plus

DEPRECATED 10/20/19 -- Generator now uses plus3x

Template used in generator-cep-vue-cli

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

# NPM, Yeoman and generator-cep-vue-cli are required
npm install -g yo
npm install -g generator-cep-vue-cli

# In any valid CEP extension folder:
# (e.g. <USERNAME>/AppData/Roaming/CEP/extensions)
yo cep-vue-cli

No setup required for:

Vue as JS framework
Hot Reloading (panel updates instantly on every save during npm run serve)
Vuetify as CSS framework
Vue-CLI-3 as Node.js tooling (webkit)
Paginations via Vue Router
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).

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
  |__ :page_facing_up: HelloWorld.vue (main route defined in ./src/router.js)
  |__ :file_folder: main (utilities)
         |__ :page_facing_up: alert.vue
         |__ :page_facing_up: identity.vue
                 • Collects extension name, version, localhost and all attributes
                 • Collects all accessible information about host environment
         |__ :page_facing_up: loadingscreen.vue
                 • Intro lottie animation masks panel's launch
         |__ :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: navbar.vue
                 • Universal toolbar reactively changes per active route
         |__ :page_facing_up: notification.vue
                 • Timed snackbar component
                 • Color and text easily modified as props on this.app
         |__ :page_facing_up: progress.vue
                 • Progressbar appended to toolbar
                 • Built in methods for indeterminate or determinate/step loading
         |__ :page_facing_up: version.vue
                 • Displays current version of extension as a footer at bottom of panel

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

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.

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
CSXS		CSXS
public		public
src		src
.debug		.debug
.gitignore		.gitignore
README.md		README.md
babel.config.js		babel.config.js
package-lock.json		package-lock.json
package.json		package.json
vue.config.js		vue.config.js

Inventsable/cep-vue-cli-plus2x

Folders and files

Latest commit

History

Repository files navigation