From b5c8b73037de23dab5aba228eb2085d860b6496c Mon Sep 17 00:00:00 2001 From: Makito Date: Mon, 22 Apr 2024 23:21:47 +0800 Subject: [PATCH] refactor(entities-routes): make expressions and monaco as optionalDependencies (#1355) --- packages/entities/entities-routes/README.md | 12 ++++++++++-- .../entities/entities-routes/docs/route-form.md | 9 +++++---- packages/entities/entities-routes/package.json | 9 +++++---- .../entities/entities-routes/vite.config.ts | 5 ++++- pnpm-lock.yaml | 17 +++++++---------- 5 files changed, 31 insertions(+), 21 deletions(-) diff --git a/packages/entities/entities-routes/README.md b/packages/entities/entities-routes/README.md index f7aa7696e3..19605f0dd9 100644 --- a/packages/entities/entities-routes/README.md +++ b/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, `` is the only component with Expressions features(controlled via the `routeFlavor` prop). + ## Individual component documentation - [``](docs/route-list.md) diff --git a/packages/entities/entities-routes/docs/route-form.md b/packages/entities/entities-routes/docs/route-form.md index cec59ad911..f5b92e3093 100644 --- a/packages/entities/entities-routes/docs/route-form.md +++ b/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` diff --git a/packages/entities/entities-routes/package.json b/packages/entities/entities-routes/package.json index 9ebf0e2e27..4c67da4e75 100644 --- a/packages/entities/entities-routes/package.json +++ b/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" } } diff --git a/packages/entities/entities-routes/vite.config.ts b/packages/entities/entities-routes/vite.config.ts index c438312bac..9219a541fe 100644 --- a/packages/entities/entities-routes/vite.config.ts +++ b/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: { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cc0cf66b07..919e95a291 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -840,15 +840,19 @@ importers: '@kong-ui-public/entities-shared': specifier: workspace:^ version: link:../entities-shared - '@kong-ui-public/expressions': - specifier: workspace:^ - version: link:../../core/expressions '@kong/icons': specifier: ^1.9.0 version: 1.9.0(vue@3.4.21) lodash.isequal: specifier: ^4.5.0 version: 4.5.0 + optionalDependencies: + '@kong-ui-public/expressions': + specifier: workspace:^ + version: link:../../core/expressions + monaco-editor: + specifier: 0.21.3 + version: 0.21.3 devDependencies: '@kong-ui-public/i18n': specifier: workspace:^ @@ -865,9 +869,6 @@ importers: axios: specifier: ^1.6.8 version: 1.6.8 - monaco-editor: - specifier: 0.21.3 - version: 0.21.3 vite-plugin-monaco-editor: specifier: ^1.1.0 version: 1.1.0(monaco-editor@0.21.3) @@ -4982,9 +4983,6 @@ packages: /ajv-formats@2.1.1: resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} - peerDependenciesMeta: - ajv: - optional: true dependencies: ajv: 8.12.0 dev: true @@ -11211,7 +11209,6 @@ packages: /monaco-editor@0.21.3: resolution: {integrity: sha512-9N7wATLpi+googstvtm6IKg97vPQ77FDYEpkow5tLriM/VJ0DaTRyUP4UVzcoH7KlPDX+e/rE7/imcOUeGkT6g==} - dev: true /mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}