fix(tsconfig): apply @vue/tsconfig (#729)

Use an exported `const enum` in vite is forbidden due to the
[compiler limitation](https://vitejs.dev/guide/features.html#isolatedmodules).
To fix this, some `const enum` exports need to be reshape to `enum`.

Besides the `const enum`, we also need to use the Type-Only Imports
and Export syntax to avoid potential problems like type-only imports
being incorrectly bundled. See https://vitejs.dev/guide/features.html#transpile-only

These restrictions are all included in `@vue/tsconfig`, so we applied
it to the root `tsconfig.json` to prevent further issues.

.eslintrc.cjs

@@ -45,6 +45,10 @@ module.exports = {
     }],
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/indent': ['error', 2],
+    '@typescript-eslint/consistent-type-imports': ['error', {
+      prefer: 'type-imports',
+      fixStyle: 'separate-type-imports',
+    }],
     // Ensures ESLint understands that `defineEmits<{ ... }>()` does _not_ fail this rule.
     'func-call-spacing': 'off',
     '@typescript-eslint/func-call-spacing': ['error', 'never'],

cypress/support/commands.ts

@@ -1,5 +1,5 @@
 import { mount } from 'cypress/vue'
-import { ComponentPublicInstance, App } from 'vue'
+import type { ComponentPublicInstance, App } from 'vue'
 import defaultRouter from '../fixtures/routes'
 import RouterLink from '../fixtures/RouterLink.vue'
 import Kongponents from '@kong/kongponents'

packages/analytics/analytics-chart/src/components/AnalyticsChart.vue

@@ -99,12 +99,14 @@
 
 <script setup lang="ts">
 import composables from '../composables'
-import { AnalyticsChartOptions } from '../types'
+import type { AnalyticsChartOptions } from '../types'
 import { ChartTypes, ChartLegendPosition } from '../enums'
 import StackedBarChart from './chart-types/StackedBarChart.vue'
 import DoughnutChart from './chart-types/DoughnutChart.vue'
-import { computed, PropType, provide, toRef } from 'vue'
-import { AnalyticsExploreResult, AnalyticsExploreV2Result, GranularityFullObj, GranularityKeys, msToGranularity } from '@kong-ui-public/analytics-utilities'
+import type { PropType } from 'vue'
+import { computed, provide, toRef } from 'vue'
+import { GranularityKeys, msToGranularity } from '@kong-ui-public/analytics-utilities'
+import type { AnalyticsExploreResult, AnalyticsExploreV2Result, GranularityFullObj } from '@kong-ui-public/analytics-utilities'
 import { datavisPalette, hasMillisecondTimestamps } from '../utils'
 import TimeSeriesChart from './chart-types/TimeSeriesChart.vue'
 import { KUI_COLOR_TEXT_WARNING } from '@kong/design-tokens'

packages/analytics/analytics-chart/src/components/SimpleChart.vue

@@ -32,11 +32,12 @@
 
 <script setup lang="ts">
 import composables from '../composables'
-import { SimpleChartOptions } from '../types'
+import type { SimpleChartOptions } from '../types'
 import { ChartTypesSimple } from '../enums'
 import GaugeChart from './chart-types/GaugeChart.vue'
-import { computed, PropType, toRef } from 'vue'
-import { AnalyticsExploreResult, AnalyticsExploreV2Result } from '@kong-ui-public/analytics-utilities'
+import type { PropType } from 'vue'
+import { computed, toRef } from 'vue'
+import type { AnalyticsExploreResult, AnalyticsExploreV2Result } from '@kong-ui-public/analytics-utilities'
 import { datavisPalette } from '../utils'
 
 const props = defineProps({

packages/analytics/analytics-chart/src/components/chart-plugins/HighlightPlugin.ts

@@ -1,4 +1,4 @@
-import { Chart, ChartEvent, InteractionItem, Plugin } from 'chart.js'
+import type { Chart, ChartEvent, InteractionItem, Plugin } from 'chart.js'
 
 interface HighlightPlugin extends Plugin {
   clickedElements?: InteractionItem[]

packages/analytics/analytics-chart/src/components/chart-plugins/VerticalLinePlugin.ts

@@ -1,4 +1,4 @@
-import { Chart, ChartType, Plugin, TooltipItem } from 'chart.js'
+import type { Chart, ChartType, Plugin, TooltipItem } from 'chart.js'
 
 interface VerticalLinePlugin extends Plugin {
   clickedSegment?: TooltipItem<ChartType>

packages/analytics/analytics-chart/src/components/chart-types/DoughnutChart.vue

@@ -35,7 +35,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, reactive, ref, toRef } from 'vue'
+import type { PropType } from 'vue'
+import { computed, reactive, ref, toRef } from 'vue'
 import 'chartjs-adapter-date-fns'
 import 'chart.js/auto'
 import ToolTip from '../chart-plugins/ChartTooltip.vue'
@@ -47,10 +48,10 @@ import {
 import { v4 as uuidv4 } from 'uuid'
 import { Doughnut } from 'vue-chartjs'
 import composables from '../../composables'
-import { AnalyticsChartColors, KChartData, TooltipState } from '../../types'
-import { Chart, ChartDataset } from 'chart.js'
+import type { AnalyticsChartColors, KChartData, TooltipState } from '../../types'
+import type { Chart, ChartDataset } from 'chart.js'
 import { ChartLegendPosition, ChartTypes } from '../../enums'
-import { DoughnutChartData } from '../../types/chart-data'
+import type { DoughnutChartData } from '../../types/chart-data'
 
 const props = defineProps({
   chartData: {

packages/analytics/analytics-chart/src/components/chart-types/GaugeChart.vue

@@ -35,7 +35,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref, toRef } from 'vue'
+import type { PropType } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import 'chartjs-adapter-date-fns'
 import 'chart.js/auto'
 // @ts-ignore - approximate-number no exported module
@@ -44,10 +45,10 @@ import { datavisPalette } from '../../utils'
 import { v4 as uuidv4 } from 'uuid'
 import { Doughnut } from 'vue-chartjs'
 import composables from '../../composables'
-import { AnalyticsChartColors, KChartData } from '../../types'
-import { Chart, ChartDataset } from 'chart.js'
+import type { AnalyticsChartColors, KChartData } from '../../types'
+import type { Chart, ChartDataset } from 'chart.js'
 import { ChartMetricDisplay } from '../../enums'
-import { DoughnutChartData } from '../../types/chart-data'
+import type { DoughnutChartData } from '../../types/chart-data'
 
 const props = defineProps({
   chartData: {

packages/analytics/analytics-chart/src/components/chart-types/StackedBarChart.vue

@@ -50,16 +50,20 @@
 </template>
 
 <script setup lang="ts">
-import { Chart, ChartDataset, ChartOptions } from 'chart.js'
-import annotationPlugin, { EventContext } from 'chartjs-plugin-annotation'
-import { PropType, Ref, ref, toRef, onMounted, onUnmounted, computed, reactive, watch, inject } from 'vue'
+import type { ChartDataset, ChartOptions } from 'chart.js'
+import { Chart } from 'chart.js'
+import type { EventContext } from 'chartjs-plugin-annotation'
+import annotationPlugin from 'chartjs-plugin-annotation'
+import { ref, toRef, onMounted, onUnmounted, computed, reactive, watch, inject } from 'vue'
+import type { PropType, Ref } from 'vue'
 import ToolTip from '../chart-plugins/ChartTooltip.vue'
 import ChartLegend from '../chart-plugins/ChartLegend.vue'
-import { accessibleGrey, MAX_LABEL_LENGTH, formatNumber, getTextHeight, getTextWidth, drawPercentage, dataTotal, BarChartData, conditionalDataTotal } from '../../utils'
+import type { BarChartData } from '../../utils'
+import { accessibleGrey, MAX_LABEL_LENGTH, formatNumber, getTextHeight, getTextWidth, drawPercentage, dataTotal, conditionalDataTotal } from '../../utils'
 import composables from '../../composables'
 import { v4 as uuidv4 } from 'uuid'
 import { ChartLegendPosition, ChartTypes } from '../../enums'
-import { AxesTooltipState, KChartData, LegendValues, TooltipState } from '../../types'
+import type { AxesTooltipState, KChartData, LegendValues, TooltipState } from '../../types'
 import { verticalLinePlugin } from '../chart-plugins/VerticalLinePlugin'
 import { highlightPlugin } from '../chart-plugins/HighlightPlugin'
 

packages/analytics/analytics-chart/src/components/chart-types/TimeSeriesChart.vue

@@ -54,7 +54,8 @@
 
 <script setup lang="ts">
 
-import { reactive, ref, computed, toRef, PropType, inject } from 'vue'
+import type { PropType } from 'vue'
+import { reactive, ref, computed, toRef, inject } from 'vue'
 import 'chartjs-adapter-date-fns'
 import 'chart.js/auto'
 import { verticalLinePlugin } from '../chart-plugins/VerticalLinePlugin'
@@ -69,9 +70,9 @@ import {
 import { v4 as uuidv4 } from 'uuid'
 import { Line, Bar } from 'vue-chartjs'
 import composables from '../../composables'
-import { AnalyticsChartColors, KChartData, LegendValues, TooltipState } from '../../types'
+import type { AnalyticsChartColors, KChartData, LegendValues, TooltipState } from '../../types'
 import { GranularityKeys } from '@kong-ui-public/analytics-utilities'
-import { Chart } from 'chart.js'
+import type { Chart } from 'chart.js'
 import { ChartLegendPosition, ChartTypes } from '../../enums'
 
 const props = defineProps({

packages/analytics/analytics-chart/src/composables/useBarChartOptions.ts

@@ -1,5 +1,14 @@
-import { BarChartOptions, ExternalTooltipContext } from '../types'
-import { Tooltip, TooltipPositionerFunction, ChartType, CategoryScale, TooltipItem, TooltipXAlignment, Interaction, InteractionModeFunction, InteractionItem } from 'chart.js'
+import type { BarChartOptions, ExternalTooltipContext } from '../types'
+import { Tooltip, Interaction } from 'chart.js'
+import type {
+  TooltipPositionerFunction,
+  ChartType,
+  TooltipItem,
+  TooltipXAlignment,
+  InteractionModeFunction,
+  InteractionItem,
+  CategoryScale,
+} from 'chart.js'
 import { isNullOrUndef, getRelativePosition } from 'chart.js/helpers'
 import { MAX_LABEL_LENGTH, horizontalTooltipPositioning, tooltipBehavior } from '../utils'
 import { computed } from 'vue'

packages/analytics/analytics-chart/src/composables/useChartJSCommon.ts

@@ -1,6 +1,7 @@
 import Chart from 'chart.js/auto'
 import type { ChartType, ChartData, Plugin, ChartOptions } from 'chart.js'
-import { onMounted, onUnmounted, Ref, watch, shallowRef } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, watch, shallowRef } from 'vue'
 import { isNullOrUndef } from 'chart.js/helpers'
 
 // Based on

packages/analytics/analytics-chart/src/composables/useChartLegendValues.spec.ts

@@ -1,4 +1,4 @@
-import { KChartData } from '../types'
+import type { KChartData } from '../types'
 import { ChartTypes } from '../enums'
 import { computed } from 'vue'
 import useChartLegendValues from './useChartLegendValues'

packages/analytics/analytics-chart/src/composables/useChartLegendValues.ts

@@ -1,6 +1,7 @@
-import { AnalyticsDataPoint, KChartData, LegendValues } from '../types'
-import { ChartTypes, ChartTypesSimple } from '../enums'
-import { computed, Ref } from 'vue'
+import type { AnalyticsDataPoint, KChartData, LegendValues } from '../types'
+import type { ChartTypes, ChartTypesSimple } from '../enums'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
 // @ts-ignore - approximate-number no exported module
 import approxNum from 'approximate-number'
 import prettyBytes from 'pretty-bytes'

packages/analytics/analytics-chart/src/composables/useDoughnutChartOptions.ts

@@ -1,12 +1,14 @@
 import { computed } from 'vue'
-import { DoughnutChartOptions, ExternalTooltipContext } from '../types'
-import {
-  Tooltip,
+import type { DoughnutChartOptions, ExternalTooltipContext } from '../types'
+import type {
   TooltipItem,
   TooltipXAlignment,
   TooltipPositionerFunction,
   ChartType,
 } from 'chart.js'
+import {
+  Tooltip,
+} from 'chart.js'
 import { horizontalTooltipPositioning, tooltipBehavior } from '../utils'
 
 export default function useDoughnutChartOptions(chartOptions: DoughnutChartOptions) {

packages/analytics/analytics-chart/src/composables/useExploreResultToDatasets.spec.ts

@@ -1,6 +1,7 @@
-import { AnalyticsExploreResult } from '@kong-ui-public/analytics-utilities'
+import type { AnalyticsExploreResult } from '@kong-ui-public/analytics-utilities'
 import { describe, it, expect } from 'vitest'
-import { computed, ComputedRef } from 'vue'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
 import useExploreResultToDatasets from './useExploreResultToDatasets'
 
 describe('useVitalsExploreDatasets', () => {

packages/analytics/analytics-chart/src/composables/useExploreResultToDatasets.ts

@@ -1,7 +1,8 @@
-import { AnalyticsExploreResult, AnalyticsExploreV2Result, AnalyticsExploreRecord } from '@kong-ui-public/analytics-utilities'
+import type { AnalyticsExploreResult, AnalyticsExploreV2Result, AnalyticsExploreRecord } from '@kong-ui-public/analytics-utilities'
 import { lookupDatavisColor, datavisPalette } from '../utils'
-import { computed, Ref } from 'vue'
-import { Dataset, ExploreToDatasetDeps, KChartData } from '../types'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { Dataset, ExploreToDatasetDeps, KChartData } from '../types'
 import { isNullOrUndef } from 'chart.js/helpers'
 import composables from '../composables'
 

packages/analytics/analytics-chart/src/composables/useExploreResultToTimeDatasets.ts

@@ -1,6 +1,7 @@
-import { AnalyticsExploreResult, AnalyticsExploreV2Result, AnalyticsExploreRecord } from '@kong-ui-public/analytics-utilities'
+import type { AnalyticsExploreResult, AnalyticsExploreV2Result, AnalyticsExploreRecord } from '@kong-ui-public/analytics-utilities'
 import { defaultLineOptions, darkenColor, lookupDatavisColor, datavisPalette } from '../utils'
-import { computed, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
 import type { Dataset, KChartData, ExploreToDatasetDeps } from '../types'
 import { parseISO } from 'date-fns'
 import { isNullOrUndef } from 'chart.js/helpers'

packages/analytics/analytics-chart/src/composables/useExploreResultToTimedDatasets.spec.ts

@@ -1,6 +1,8 @@
-import { AnalyticsExploreResult } from '@kong-ui-public/analytics-utilities'
-import { describe, it, expect, vitest, SpyInstance } from 'vitest'
-import { computed, ComputedRef } from 'vue'
+import type { AnalyticsExploreResult } from '@kong-ui-public/analytics-utilities'
+import type { SpyInstance } from 'vitest'
+import { describe, it, expect, vitest } from 'vitest'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
 import useExploreResultToTimeDataset from './useExploreResultToTimeDatasets'
 
 const START_FOR_DAILY_QUERY = new Date(1672560000000)

packages/analytics/analytics-chart/src/composables/useLineChartOptions.ts

@@ -1,9 +1,17 @@
 import { computed } from 'vue'
-import { Tooltip, TooltipPositionerFunction, ChartType, TooltipYAlignment, TooltipXAlignment } from 'chart.js'
+import type {
+  TooltipPositionerFunction,
+  ChartType,
+  TooltipYAlignment,
+  TooltipXAlignment,
+} from 'chart.js'
+import {
+  Tooltip,
+} from 'chart.js'
 import { horizontalTooltipPositioning, tooltipBehavior, verticalTooltipPositioning } from '../utils'
 import { millisecondsToHours, secondsToHours } from 'date-fns'
 import { isNullOrUndef } from 'chart.js/helpers'
-import { ExternalTooltipContext, LineChartOptions } from '../types'
+import type { ExternalTooltipContext, LineChartOptions } from '../types'
 import { GranularityKeys } from '@kong-ui-public/analytics-utilities'
 
 export default function useLinechartOptions(chartOptions: LineChartOptions) {

packages/analytics/analytics-chart/src/composables/useReportChartDataForSynthetics.ts

@@ -1,4 +1,5 @@
-import { Ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { watch } from 'vue'
 
 declare global {
   interface Window {

packages/analytics/analytics-chart/src/types/chart-data.ts

@@ -1,5 +1,5 @@
-import { ChartData, ChartDataset } from 'chart.js'
-import { ChartTypes, ChartMetricDisplay, ChartTypesSimple } from '../enums'
+import type { ChartData, ChartDataset } from 'chart.js'
+import type { ChartTypes, ChartMetricDisplay, ChartTypesSimple } from '../enums'
 
 // Chart.js extendend interfaces
 export type Dataset = ChartDataset & { rawDimension: string, rawMetric?: string, total?: number, lineTension?: number, fill?: boolean }

packages/analytics/analytics-chart/src/types/chartjs-options.ts

@@ -1,7 +1,7 @@
-import { Ref } from 'vue'
-import { Chart, ChartType, TooltipModel } from 'chart.js'
-import { ChartTypes } from '../enums'
-import { GranularityKeys } from '@kong-ui-public/analytics-utilities'
+import type { Ref } from 'vue'
+import type { Chart, ChartType, TooltipModel } from 'chart.js'
+import type { ChartTypes } from '../enums'
+import type { GranularityKeys } from '@kong-ui-public/analytics-utilities'
 export interface TooltipState {
   showTooltip: boolean,
   tooltipContext: string | number,

packages/analytics/analytics-chart/src/types/explore-to-dataset-deps.ts

@@ -1,4 +1,4 @@
-import { AnalyticsChartColors } from './chart-data'
+import type { AnalyticsChartColors } from './chart-data'
 
 /**
  * Interace representing the various options

packages/analytics/analytics-chart/src/utils/commonOptions.ts

@@ -1,8 +1,8 @@
 import prettyBytes from 'pretty-bytes'
-import { ExternalTooltipContext, KChartData, TooltipState } from '../types'
+import type { ExternalTooltipContext, KChartData, TooltipState } from '../types'
 import { DECIMAL_DISPLAY, numberFormatter } from '../utils'
 import { isValid } from 'date-fns'
-import { Point, ScatterDataPoint } from 'chart.js'
+import type { Point, ScatterDataPoint } from 'chart.js'
 import { ChartTypes, ChartTypesSimple } from '../enums'
 
 export const tooltipBehavior = (tooltipData: TooltipState, context: ExternalTooltipContext) : void => {

packages/analytics/analytics-metric-provider/sandbox/App.vue

@@ -26,12 +26,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { DataFetcher, EXPLORE_V2_DIMENSIONS, ExploreV2Query, EXPLORE_V2_FILTER_TYPES } from '../src/types'
+import type { DataFetcher, ExploreV2Query } from '../src/types'
+import { EXPLORE_V2_DIMENSIONS, EXPLORE_V2_FILTER_TYPES } from '../src/types'
 import MetricsConsumer from '../src/components/MetricsConsumer.vue'
 import MetricsProviderInternal from '../src/components/MetricsProviderInternal.vue'
-import { MockOptions, mockExploreResponse } from '../src/mockExploreResponse'
-import axios, { AxiosResponse } from 'axios'
-import { DeltaQueryTime, QueryTime, TimePeriods, Timeframe, TimeframeKeys } from '@kong-ui-public/analytics-utilities'
+import type { MockOptions } from '../src/mockExploreResponse'
+import { mockExploreResponse } from '../src/mockExploreResponse'
+import type { AxiosResponse } from 'axios'
+import axios from 'axios'
+import type { QueryTime, Timeframe } from '@kong-ui-public/analytics-utilities'
+import { DeltaQueryTime, TimePeriods, TimeframeKeys } from '@kong-ui-public/analytics-utilities'
 
 const refreshInterval = 60 * 1000
 const hasTrendAccess = true

packages/analytics/analytics-metric-provider/src/components/MetricsConsumer.vue

@@ -6,9 +6,11 @@
   </slot>
 </template>
 <script setup lang="ts">
-import { inject, computed, type Ref } from 'vue'
+import type { Ref } from 'vue'
+import { inject, computed } from 'vue'
 import { METRICS_PROVIDER_KEY } from './metricsProviderUtil'
-import { MetricCardDef, MetricCardSize, DECIMAL_DISPLAY, MetricCardContainer } from '@kong-ui-public/metric-cards'
+import type { MetricCardDef } from '@kong-ui-public/metric-cards'
+import { MetricCardSize, DECIMAL_DISPLAY, MetricCardContainer } from '@kong-ui-public/metric-cards'
 import '@kong-ui-public/metric-cards/dist/style.css'
 import composables from '../composables'
 import { ALL_STATUS_CODE_GROUPS, STATUS_CODES_FAILED } from '../constants'

packages/analytics/analytics-metric-provider/src/components/MetricsProvider.cy.ts

@@ -1,9 +1,11 @@
 import MetricsTestHarness from './MetricsTestHarness.vue'
 import { ref } from 'vue'
-import { DataFetcher, ExploreV2Query, EXPLORE_V2_AGGREGATIONS, EXPLORE_V2_DIMENSIONS, EXPLORE_V2_FILTER_TYPES } from '../types'
-import { QueryTime } from '@kong-ui-public/analytics-utilities'
-import { MockOptions, mockExploreResponse } from '../mockExploreResponse'
-import { AxiosResponse } from 'axios'
+import type { DataFetcher, ExploreV2Query } from '../types'
+import { EXPLORE_V2_AGGREGATIONS, EXPLORE_V2_DIMENSIONS, EXPLORE_V2_FILTER_TYPES } from '../types'
+import type { QueryTime } from '@kong-ui-public/analytics-utilities'
+import type { MockOptions } from '../mockExploreResponse'
+import { mockExploreResponse } from '../mockExploreResponse'
+import type { AxiosResponse } from 'axios'
 
 describe('<AnalyticsMetricProvider />', () => {
 

packages/analytics/analytics-metric-provider/src/components/MetricsProviderInternal.vue

@@ -6,9 +6,11 @@
 </template>
 <script setup lang="ts">
 import { computed, provide, toRef } from 'vue'
-import { TimePeriods, Timeframe, TimeframeKeys } from '@kong-ui-public/analytics-utilities'
+import type { Timeframe } from '@kong-ui-public/analytics-utilities'
+import { TimePeriods, TimeframeKeys } from '@kong-ui-public/analytics-utilities'
 import { METRICS_PROVIDER_KEY, defaultFetcherDefs } from './metricsProviderUtil'
-import { DataFetcher, EXPLORE_V2_DIMENSIONS, ExploreV2Filter } from '../types'
+import { EXPLORE_V2_DIMENSIONS } from '../types'
+import type { DataFetcher, ExploreV2Filter } from '../types'
 
 const props = withDefaults(defineProps<{
   maxTimeframe?: TimeframeKeys,