@kong-ui-public/expressions

Reusable components to support Kong's expressions language.

• Features
• Requirements
• Usage
  • Install
  • Import and use
• Individual component documentation

Features

• Provides a Monaco-based editor with autocomplete and syntax highlighting support for the expressions language.

Requirements

• vue must be initialized in the host application
• monaco-editor is required as a dependency in the host application
• vite-plugin-monaco-editor is a required Vite plugin to bundle the Monaco Editor and its web workers
• @kong-ui-public/forms is an optional dependency required for the RouterPlaygroundModal component

Usage

Install

Install required devDependencies in your host application:

yarn add -D vite-plugin-monaco-editor

Enable the vite-plugin-monaco-editor plugin. Your Vite config should look like this:

import monacoEditorPlugin from 'vite-plugin-monaco-editor'

export default defineConfig({
  // ...
  plugins: [
    monacoEditorPlugin({}),
  ],
  // ...
}

For more information on configuring the vite-plugin-monaco-editor plugin, you should refer to their readme docs.

Import and use

Import the component(s) in your host application as well as the package styles:

import { asyncInit, ExpressionsEditor } from '@kong-ui-public/expressions'
import '@kong-ui-public/expressions/dist/style.css'

This package utilizes vite-plugin-top-level-await to transform code in order to use top-level await on older browsers. To load the WASM correctly, you must use await or Promise.then to wait the imported asyncInit before using any other imported values.

For example:

const editorInitialized = ref(false)

asyncInit.then(() => {
  editorInitialized.value = true
  // use the editor and other imported values
})

You can also make use of Vue's experimental Suspense component to load async components that use this package.

Individual component documentation

• <ExpressionsEditor />
• <RouterPlaygroundModal />