This is an interactive config creator and editor for RAMP4 config files.
🚧 Currently does not have 100% coverage of all configuration options 🚧
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();
Whenever you want to update the RAMP4 build to the latest and greatest, just replace the files in the src/lib
folder.
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.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
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:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
See Vite Configuration Reference.
npm install
npm run dev
npm run build
npm run build:lib
npm run build:lib-legacy (for apps with older builds)
Lint with ESLint
npm run lint