MoYiBombino

| Get Started | Create Panel | Create Template | Templates | Commands | Config | | ----------------------------- | :---------------------------: | :---------------------------------: | :---------------------: | :-------------------: | :---------------: |

Supercharged rebuild of generators cep-vue-cli and cep-quasar-cli for creating Adobe CEP panel with nodeJS + Vue, includes dynamic template support for Vue-CLI and Quasar-CLI, cloud or private local repositories, and configurable custom tooling presets (user-defined path locations).

开始

Install globally using npm i -g bombino then generate your new project and by running bombino.

Or, you may skip installation and generate a project via npx with npx bombino.

It is recommended that you generate your project within a valid CEP extension folder in order to access the panel in your host application:

# Windows: C:\Users\<USERNAME>\AppData\Roaming\CEP\extensions
# macOS: ~/Library⁩/Application Support/Adobe/⁨CEP⁩/extensions

⚠️ If this is your first time developing a CEP panel you may need to bypass the extension signatures check by editing the CSXS preference properties file in order to open the extension in the host application. Be sure to edit the correct properties file according to the CEP version of your host application.

Create Panel

Generate a new panel from local or cloud-based templates in just a few seconds:

If no local templates are found in config, cloud templates are automatically selected. Settings are very similar to generator-cep-vue-cli, but are far more versatile and dynamic in how they're applied, now supporting any Github link (queried on launch, not hardcoded) or any private folder on your own machine.

Note that multiple Inquirer.js instantiations in a Promise chain are known to cause graphical errors -- if you select Bombino default templates and reach the "Want to use the ____ template" or "Select a template" screen, you may need to press Enter before Inquirer receives input. Trying to fix this

Create Template

Take any valid panel and turn it into a usable template, prompting to save to the Create a new Template list in command. This should be used on the parent folder of the template, and will prompt to create a template of any child:

This data is saved locally within a .bombino json config file, supporting the ability to customize relative path location to files alongside placeholder value and RegExp detection depending on your specific needs or tooling preset.

Templates

See more information about usage:

Vue-CLI

• Bare (No extras)
• Basic (Barebones with utility components)
• Router (Basic + Vue Router)
• Vuetify (Vuetify, Router, Lottie, Modal Dialogs)
• 🔥 Brutalism Basic (Brutalism + Utilities) 🔥
• 🔥 Brutalism Router (Brutalism, Router + Utilities) 🔥
• 🔥 Brutalism Vuex (Brutalism, Router, Vuex + Utilities) 🔥

Quasar-CLI

• Panelify (Vuex, Router, Browser Compatible)
• Plus (Vuex, Router, Lottie, Modal Dialogs)
• Slim (Modified Plus template with slim style)

Commands

Each template 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.

Extras

• starlette (Shipped in all templates) - Color and theming engine that handles all host app colors and exposes them as reactive CSS variables to save you the need to do any theme or color logic yourself.
• cep-spy (Shipped in all templates) - Lightweight, no dependency utility for revealing all information about the current host app, current panel, environment and even sibling CEP extensions.
• lokney (Shipped in all templates) - Universal <Panel> and <Menu> utility components to greatly simplify the overhead of Adobe-specific extensions.
• cluecumber (Shipped in all templates) - Browser-friendly utilities for using CSInterface, opening links, async evalScript, and more.
• 🔥 brutalism 🔥 - Battleaxe's component library for Adobe CEP panels.
• panelify - Vue component to create a browser wrapper of any style Adobe host for your extension
• scriptopia (Already taken care of in bombino templates) - Generate Typescript support for any compatible Adobe app
• leylo - Library to integrate a Firebase backend into any panel with a single command and line of code, providing over 40 CRUD actions for Firestore database.

Config

Upon creating a new panel or template, a localized .bombino (JSON) file is created to store your settings. This controls all the logic used to find, modify, replace and update your data. The structure is:

{
  // Custom or default tooling, only used to define where the target files are relative to your project.
  // [model-name]: {
  "VUE": {
    "paths": {
      // These are the locations of files which should be targeted for PLACEHOLDER injection
      // [key]: [relative-path],
      "index": "./public/index.html",
      "manifest": "./CSXS/manifest.xml"
      // etc. Note that "relative" is to the template, not the parent folder launching bombino
    }
  },
  // Models are an array of tooling systems (default Vue-CLI and Quasar-CLI). New toolings with specific needs/file-paths can be added here
  "_MODELS": [
    {
      // name: string associated with above [model-name] (must be exact)
      "name": "VUE",
      // label: description to show on prompts of which tooling to use
      "label": "Vue-CLI",
      // placeholders: currently unused, strict cap on which placeholders
      "placeholders": ["name", "title", "hostlist", "hostlist_debug"],
      // exclusive: if this file exists in a repo, know it must be this tooling.
      // This is used to auto-suggest tooling rather than prompt every time.
      "exclusive": "./vue.config.js",
      // isCustom: boolean for whether or not this was a user-generated template
      "isCustom": false
    }
  ],
  // Any user-generated templates to prompt as LOCAL
  "_TEMPLATES": [
    {
      // index: used for sorting to display in list (lower numbers at top)
      "index": 0,
      // name: unique string associated with this template folder
      "name": "bombino-vue-test",
      // label: Description to show in brackets after name within prompts
      "label": "sample Vue",
      // path: if from a private directory, provide the absolute path for download
      "path": "C:\\Users\\TRSch\\AppData\\Roaming\\Adobe\\CEP\\extensions\\bombino-vue-test",
      // model: exact key to match above tooling schema
      "model": "VUE",
      // gitURL: if from a GitHub repo, provide [user]/[repo] for download
      "gitURL": null
    }
  ],
  //
  "_OPTIONS": {
    // dirty: Boolean, if false then this config is the default and hasn't been changed by user.
    "dirty": true,
    // Add a quick prompt for using the last template again (skipping multiple prompts)
    "lastTemplate": "my-custom-template"
    // more to come
  },
  //
  "_PLACEHOLDERS": {
    "name": {
      // value: what to search for or inject. If creating a panel, search for this value.
      // If creating a template, inject this value
      "value": "$BOMBINO_NAME$",
      // templateRX: RegExp to use for combing template if creating a panel
      "templateRX": "/\\$BOMBINO_NAME\\$/gm",
      // settingsKey: exact match of key-value pair within prompt answers, giving value to replace PLACEHOLDER
      "settingsKey": "extName",
      // panelRX: file-specific RegExp to find user-content and replace it with a PLACEHOLDER.
      "panelRX": {
        // Note that keys match the root-level [model-name].paths tooling object
        "manifest": "/\\<Extension\\sId\\=\\\"([\\w|\\.|\\-]*)\\\"/gm",
        // RegExp must be contained in string (as they have no JSON support)
        "index": "/\\<title\\>(.*)\\<\\/title\\>/",
        // The content to replace must be in the First Capture Group (within round brackets)
        "dev": "/\\<title\\>(.*)\\<\\/title\\>/"
      },
      // If this is a static value, you can add optional parameter here to control the injected value (replacing $BOMBINO_NAME$):
      "override": "<%= htmlWebpackPlugin.options.productName %>"
    }
  }
}

Contributors

Special thanks to Adam and Eric for their invaluable help

| | | | | :-----------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------: | | Tom Scharstein | Adam Plouff | Eric Robinson | | Creator | General Wizardry | Inspector General |

License

MIT © Tom Scharstein