Ramp 4 Config Editor

This is an interactive config creator and editor for RAMP4 config files.

🚧 Currently does not have 100% coverage of all configuration options 🚧

Basic Live Demo

Usage

When you start up the app, you will notice a fancy loading screen that says waiting for config. You need to use the app's API in order to "start" the app.

The API is available on the window object via the ramp4EditorAPI property. You can read the src/main.ts file for further details on what goodies the API provides.

To start the app, you'll want to open the console in your browser and do:

window.ramp4EditorAPI.initialize(ramp4Config, ramp4Options);

The app will be started with the initial config and options if you provide them. Otherwise, respectful defaults will be used.

Anytime you go into any of the sections and edit any property, the change is reflected immediately, without the need to press any save button. You can view your current config via:

window.ramp4EditorAPI.getConfig();

Storylines Integration

The easiest and best way to integrate this is by creating a build of the app via npm run build:lib-legacy, republishing the plugin via npm publish, and then updating the plugin in the Storylines Editor repo to the newest version. Note that the legacy option can be removed once the Storylines Editor migrates to Vite or a newer version of Vue CLI.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Build Plugin

npm run build:lib
npm run build:lib-legacy (for apps with older builds)

Lint with ESLint

npm run lint