refactor(entities-routes): make expressions and monaco as optionalDep…

…endencies (#1355)

packages/entities/entities-routes/README.md

@@ -7,14 +7,16 @@ Route entity components.
 - [Usage](#usage)
   - [Install](#install)
   - [Registration](#registration)
+- [Expressions features](#expressions-features)
 - [Individual component documentation](#individual-component-documentation)
 
 ## Requirements
 
-- `vue` and `vue-router` must be initialized in the host application
+- `vue` and `vue-router` must be initialized in the host application.
 - `@kong/kongponents` must be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
 - `@kong-ui-public/i18n` must be available as a `dependency` in the host application.
-- `axios` must be installed as a dependency in the host application
+- `axios` must be installed as a dependency in the host application.
+- If you want to enable [Kong's Expressions language](https://docs.konghq.com/gateway/latest/reference/expressions-language/)-related [features](#expressions-features) in your host app, `@kong-ui-public/expressions` and `monaco-editor` must be installed as dependencies in the host application.
 
 ## Included components
 
@@ -43,6 +45,12 @@ import { RouteList, RouteForm, RouteConfigCard } from '@kong-ui-public/entities-
 import '@kong-ui-public/entities-routes/dist/style.css'
 ```
 
+## Expressions features
+
+This package utilizes `@kong-ui-public/expressions` and `monaco-editor` to support [Kong's Expressions language](https://docs.konghq.com/gateway/latest/reference/expressions-language/)-related features. You will need to ensure these dependencies are installed in your host application to enable these features.
+
+As of now, `<RouteForm.vue />` is the only component with Expressions features(controlled via the `routeFlavor` prop).
+
 ## Individual component documentation
 
 - [`<RouteList.vue />`](docs/route-list.md)

packages/entities/entities-routes/docs/route-form.md

@@ -13,10 +13,11 @@ A form component for Routes.
 
 ## Requirements
 
-- `vue` and `vue-router` must be initialized in the host application
+- `vue` and `vue-router` must be initialized in the host application.
 - `@kong/kongponents` must be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
 - `@kong-ui-public/i18n` must be available as a `dependency` in the host application.
-- `axios` must be installed as a dependency in the host application
+- `axios` must be installed as a dependency in the host application.
+- If you want to use Expressions features, `@kong-ui-public/expressions` and `monaco-editor` must be installed as dependencies in the host application.
 
 ## Usage
 
@@ -118,7 +119,7 @@ Show/hide Service Select field. Should be used in case of manual adding `service
 
 Show tags field under _Advanced Fields_ collapse or in it's default place (before protocols field).
 
-#### `routeFlavors`
+#### `routeFlavors` (controls Expressions features)
 
 - type: `RouteFlavors`
 - required: `false`
@@ -133,7 +134,7 @@ Show tags field under _Advanced Fields_ collapse or in it's default place (befor
     - type: `boolean`
     - required: `false`
     - default: `false`
-    - Whether to show input components for the Expressions route.
+    - Whether to show input components for the Expressions route. (If true, Expressions features will be enabled for this component.)
 
 #### `configTabTooltips`
 

packages/entities/entities-routes/package.json

@@ -24,7 +24,6 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/kongponents": "^9.0.0-alpha.146",
     "axios": "^1.6.8",
-    "monaco-editor": "0.21.3",
     "vue": ">= 3.3.13 < 4",
     "vue-router": "^4.3.0"
   },
@@ -34,7 +33,6 @@
     "@kong/kongponents": "9.0.0-alpha.146",
     "@types/lodash.isequal": "^4.5.8",
     "axios": "^1.6.8",
-    "monaco-editor": "0.21.3",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
@@ -69,12 +67,15 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "5000KB"
+    "errorLimit": "700KB"
   },
   "dependencies": {
     "@kong-ui-public/entities-shared": "workspace:^",
-    "@kong-ui-public/expressions": "workspace:^",
     "@kong/icons": "^1.9.0",
     "lodash.isequal": "^4.5.0"
+  },
+  "optionalDependencies": {
+    "@kong-ui-public/expressions": "workspace:^",
+    "monaco-editor": "0.21.3"
   }
 }

packages/entities/entities-routes/vite.config.ts

@@ -18,7 +18,10 @@ const config = mergeConfig(sharedViteConfig, defineConfig({
       fileName: (format) => `${sanitizedPackageName}.${format}.js`,
     },
     rollupOptions: {
-      external: ['monaco-editor'], // Do not bundle monaco-editor with this package. Provide as a peer dependency
+      external: [
+        '@kong-ui-public/expressions', // This is optional if we do not use Expressions features
+        'monaco-editor', // This is optional if we do not use Expressions features
+      ],
     },
   },
   server: {