chore(visualizations): add path aliases (#254)

packages/visualizations-react/babel.config.js

@@ -4,4 +4,4 @@ module.exports = {
         '@babel/preset-typescript',
         '@babel/preset-react',
     ],
-};
+};

packages/visualizations-react/package.json

@@ -16,6 +16,7 @@
     ],
     "main": "dist/index.umd.js",
     "module": "dist/index.es.js",
+    "unpkg": "dist/index.umd.js",
     "typings": "dist/src/index.d.ts",
     "files": [
         "dist",
@@ -61,12 +62,13 @@
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.18.6",
         "@rollup/plugin-alias": "^5.1.0",
-        "@rollup/plugin-babel": "^5.3.0",
-        "@rollup/plugin-commonjs": "^19.0.0",
-        "@rollup/plugin-json": "^4.1.0",
-        "@rollup/plugin-node-resolve": "^10.0.0",
-        "@rollup/plugin-replace": "^3.0.1",
-        "@rollup/plugin-typescript": "^6.1.0",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^26.0.1",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-replace": "^5.0.7",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^11.1.6",
         "@size-limit/preset-small-lib": "^8.1.0",
         "@storybook/addon-essentials": "^7.6.17",
         "@storybook/addon-links": "^7.6.17",
@@ -106,14 +108,13 @@
         "react": "^16.13.0",
         "react-dom": "^16.13.0",
         "react-is": "^16.13.0",
-        "rollup": "^2.79.1",
+        "rollup": "^4.18.0",
         "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-terser": "^7.0.2",
         "size-limit": "^8.1.0",
         "storybook": "^7.6.17",
         "storybook-addon-rtl": "^1.0.0",
         "tslib": "^2.1.0",
-        "typescript": "4.6"
+        "typescript": "^5.5.3"
     },
     "gitHead": "5b28cc594764f53129f0de5847152dd55e27ab24"
 }

packages/visualizations-react/rollup.config.js → packages/visualizations-react/rollup.config.mjs

@@ -1,19 +1,22 @@
+import { fileURLToPath } from 'url';
+import path from 'path';
 import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
-import path from 'path';
 // import visualizer from 'rollup-plugin-visualizer';
-import { terser } from 'rollup-plugin-terser';
+import terser from '@rollup/plugin-terser';
+import alias from '@rollup/plugin-alias';
 import typescript from '@rollup/plugin-typescript';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import { babel } from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
-import alias from '@rollup/plugin-alias';
 import { defineConfig } from 'rollup';
-import pkg from './package.json';
+import pkg from './package.json' with { type: 'json' };
 
 const production = !process.env.ROLLUP_WATCH;
+const __fileName = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__fileName);
 const projectRootDir = path.resolve(__dirname);
 
 function basePlugins() {
@@ -52,7 +55,7 @@ function basePlugins() {
 function onwarn(warning, warn) {
     // https://github.com/moment/luxon/issues/193
     if (warning.code === 'CIRCULAR_DEPENDENCY') {
-        if (warning.importer.includes('node_modules/luxon')) {
+        if (warning.ids.includes('node_modules/luxon')) {
             return;
         }
     }

packages/visualizations/.eslintrc.js

@@ -11,13 +11,18 @@ module.exports = {
         'prettier',
         'plugin:svelte/prettier',
     ],
+    settings: {
+        'import/resolver': {
+            typescript: {},
+        },
+    },
     parser: '@typescript-eslint/parser',
     parserOptions: {
         project: './tsconfig.json',
         extraFileExtensions: ['.svelte'],
         tsconfigRootDir: __dirname,
     },
-    plugins: ['@typescript-eslint', 'prettier'],
+    plugins: ['@typescript-eslint', 'prettier', 'import'],
     overrides: [
         {
             files: ['*.svelte'],

packages/visualizations/package.json

@@ -45,12 +45,14 @@
     "devDependencies": {
         "@babel/core": "^7.13.10",
         "@babel/preset-env": "^7.13.10",
-        "@rollup/plugin-babel": "^5.3.0",
-        "@rollup/plugin-commonjs": "^19.0.0",
-        "@rollup/plugin-json": "^4.1.0",
-        "@rollup/plugin-node-resolve": "^10.0.0",
-        "@rollup/plugin-replace": "^3.0.1",
-        "@rollup/plugin-typescript": "^6.1.0",
+        "@rollup/plugin-alias": "^5.1.0",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^26.0.1",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-replace": "^5.0.7",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^11.1.6",
         "@tsconfig/svelte": "^1.0.10",
         "@types/chroma-js": "^2.1.4",
         "@types/d3-geo": "^3.0.2",
@@ -68,6 +70,7 @@
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.3.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-svelte": "^2.35.1",
@@ -76,16 +79,15 @@
         "prettier": "2.4.1",
         "prettier-plugin-svelte": "^2.4.0",
         "rimraf": "^3.0.2",
-        "rollup": "^2.33.1",
+        "rollup": "^4.18.0",
         "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-svelte": "^6.1.0",
-        "rollup-plugin-terser": "^7.0.2",
+        "rollup-plugin-svelte": "^7.2.2",
         "svelte": "^3.43.2",
         "svelte-check": "^2.2.7",
         "svelte-eslint-parser": "^0.33.1",
         "svelte-preprocess": "^4.9.8",
         "tslib": "^2.0.3",
-        "typescript": "4.6"
+        "typescript": "^5.5.3"
     },
     "dependencies": {
         "@placemarkio/geo-viewport": "^1.0.2",

packages/visualizations/rollup.config.js → packages/visualizations/rollup.config.mjs

@@ -1,28 +1,43 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
 import svelte from 'rollup-plugin-svelte';
+import alias from '@rollup/plugin-alias';
 import autoPreprocess from 'svelte-preprocess';
 import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
 // import visualizer from 'rollup-plugin-visualizer';
-import { terser } from 'rollup-plugin-terser';
+import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import { babel } from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
 import { defineConfig } from 'rollup';
-import pkg from './package.json';
+import pkg from './package.json' with { type: 'json' };
 
 const production = !process.env.ROLLUP_WATCH;
+const __fileName = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__fileName);
+const projectRootDir = path.resolve(__dirname);
 
 function basePlugins() {
     return [
+        alias({
+            entries: {
+                "components": path.resolve(projectRootDir, 'src/components'),
+                "stores": path.resolve(projectRootDir, 'src/stores'),
+                "types": path.resolve(projectRootDir, 'src/types'),
+            },
+        }),
         svelte({
             // enable run-time checks when not in production
-            dev: !production,
             include: 'src/**/*.svelte',
             emitCss: true,
-            immutable: true,
+            compilerOptions: {
+                dev: !production,
+                immutable: true,
+            },
             preprocess: autoPreprocess({
                 scss: {
                     includePaths: ['src'],
@@ -56,7 +71,7 @@ function basePlugins() {
 function onwarn(warning, warn) {
     // https://github.com/moment/luxon/issues/193
     if (warning.code === 'CIRCULAR_DEPENDENCY') {
-        if (warning.importer.includes('node_modules/luxon')) {
+        if (warning.ids.includes('node_modules/luxon')) {
             return;
         }
     }

packages/visualizations/src/components/Chart/Chart.svelte

@@ -3,12 +3,15 @@
     import type { ChartConfiguration } from 'chart.js';
     import { Chart } from 'chart.js';
     import 'chartjs-adapter-luxon';
-    import type { DataFrame } from '../types';
-    import { generateId } from '../utils';
-    import SourceLink from '../utils/SourceLink.svelte';
-    import { defaultNumberFormat } from '../utils/formatter';
-    import CategoryLegend from '../Legend/CategoryLegend.svelte';
-    import type { LegendPositions, CategoryLegend as CategoryLegendType } from '../Legend/types';
+    import CategoryLegend from 'components/Legend/CategoryLegend.svelte';
+    import type { DataFrame } from 'types';
+    import { generateId } from 'components/utils';
+    import SourceLink from 'components/utils/SourceLink.svelte';
+    import { defaultNumberFormat } from 'components/utils/formatter';
+    import type {
+        LegendPositions,
+        CategoryLegend as CategoryLegendType,
+    } from 'components/Legend/types';
     import { ChartSeriesType } from './types';
     import type {
         ChartProps,

packages/visualizations/src/components/Chart/datasets.ts

@@ -1,13 +1,13 @@
 import type { ChartDataset } from 'chart.js';
 import type { Options as DataLabelsOptions } from 'chartjs-plugin-datalabels/types/options';
+import type { DataFrame } from 'types';
+import { defaultCompactNumberFormat, assureMaxLength } from 'components/utils/formatter';
 import type {
     ChartSeries,
     DataLabelsConfiguration,
     FillConfiguration,
     ScriptableTreemapContext,
 } from './types';
-import type { DataFrame } from '../types';
-import { defaultCompactNumberFormat, assureMaxLength } from '../utils/formatter';
 import {
     defaultValue,
     singleChartJsColor,

packages/visualizations/src/components/Chart/legend.ts

@@ -1,9 +1,9 @@
 import type { LegendOptions, ChartConfiguration, Chart } from 'chart.js';
 import type { _DeepPartialObject } from 'chart.js/dist/types/utils';
+import { assureMaxLength } from 'components/utils/formatter';
+import { CATEGORY_ITEM_VARIANT } from 'components/Legend/types';
 import type { ChartOptions } from './types';
-import { assureMaxLength } from '../utils/formatter';
 import { defaultValue, DEFAULT_GREY_COLOR } from './utils';
-import { CATEGORY_ITEM_VARIANT } from '../Legend/types';
 
 const LEGEND_MAX_LENGTH = 50;
 

packages/visualizations/src/components/Chart/scales.ts

@@ -8,6 +8,7 @@ import type {
 } from 'chart.js';
 import { DateTime } from 'luxon';
 import type { DeepPartial } from 'chart.js/dist/types/utils';
+import { assureMaxLength, defaultCompactNumberFormat } from 'components/utils/formatter';
 import type {
     CartesianAxisConfiguration,
     ChartOptions,
@@ -16,7 +17,6 @@ import type {
     TimeCartesianAxisConfiguration,
 } from './types';
 import { defaultValue, singleChartJsColor } from './utils';
-import { assureMaxLength, defaultCompactNumberFormat } from '../utils/formatter';
 
 const TICK_MAX_LENGTH = 40;
 

packages/visualizations/src/components/Chart/types.ts

@@ -1,6 +1,5 @@
-import type { Color, DataFrame, Source } from '../types';
-import type { LegendConfiguration } from '../Legend/types';
-import type { Async } from '../../types';
+import type { Async, Color, DataFrame, Source } from 'types';
+import type { LegendConfiguration } from 'components/Legend/types';
 
 export interface ChartOptions {
     /** Specify label column in DataFrame (mandatory for all charts except Treemap) */

packages/visualizations/src/components/Chart/utils.ts

@@ -1,4 +1,4 @@
-import type { Color } from '../types';
+import type { Color } from 'types';
 
 export const DEFAULT_GREY_COLOR = '#F0F0F0';
 

packages/visualizations/src/components/ChoroplethMap/WebGl/ChoroplethGeoJson.svelte

@@ -3,9 +3,7 @@
     import type { ExpressionSpecification, SourceSpecification, GestureOptions } from 'maplibre-gl';
     import type { BBox, FeatureCollection } from 'geojson';
     import { debounce } from 'lodash';
-    import type { ColorScale, DataBounds, Color, Source } from '../../types';
-    import MapRender from './MapRender.svelte';
-    import { BLANK } from '../mapStyles';
+    import type { ColorScale, Color, DataBounds, Source } from 'types';
     import {
         getDataBounds,
         mapKeyToColor,
@@ -15,6 +13,8 @@
         computeMatchExpression,
     } from '../utils';
     import { DEFAULT_COLORS, DEFAULT_COLORSCALE } from '../constants';
+    import MapRender from './MapRender.svelte';
+    import { BLANK } from '../mapStyles';
     import type {
         ChoroplethDataValue,
         ChoroplethLayer,

packages/visualizations/src/components/ChoroplethMap/WebGl/ChoroplethVectorTiles.svelte

@@ -7,7 +7,7 @@
     } from 'maplibre-gl';
     import type { BBox } from 'geojson';
     import { debounce } from 'lodash';
-    import type { ColorScale, DataBounds, Color, Source } from '../../types';
+    import type { ColorScale, Color, DataBounds, Source } from 'types';
     import MapRender from './MapRender.svelte';
     import { BLANK } from '../mapStyles';
     import {

packages/visualizations/src/components/ChoroplethMap/WebGl/MapRender.svelte

@@ -14,13 +14,13 @@
     import { onMount } from 'svelte';
     import { debounce } from 'lodash';
     import type { BBox } from 'geojson';
-    import SourceLink from '../../utils/SourceLink.svelte';
+    import type { ColorScale, DataBounds, Source } from 'types';
+    import type { LegendVariant } from 'components/Legend/types';
+    import SourceLink from 'components/utils/SourceLink.svelte';
+    import ColorsLegend from 'components/Legend/ColorsLegend.svelte';
+    import BackButton from 'components/utils/BackButton.svelte';
+    import MiniMap from 'components/utils/MiniMap.svelte';
     import { computeMaxZoomFromGeoJsonFeatures, getFixedTooltips } from '../utils';
-    import ColorsLegend from '../../Legend/ColorsLegend.svelte';
-    import BackButton from '../../utils/BackButton.svelte';
-    import MiniMap from '../../utils/MiniMap.svelte';
-    import type { ColorScale, DataBounds, Source } from '../../types';
-    import type { LegendVariant } from '../../Legend/types';
     import type {
         ChoroplethFixedTooltipDescription,
         MapLayer,

packages/visualizations/src/components/ChoroplethMap/constants.ts

@@ -1,6 +1,6 @@
 import type { FeatureCollection } from 'geojson';
-import { ColorScaleTypes } from '../types';
-import type { ColorScale, Color } from '../types';
+import { ColorScaleTypes } from 'types';
+import type { ColorScale, Color } from 'types';
 
 export const DEFAULT_COLORS: Record<string, Color> = {
     Default: '#CCCCCC',

packages/visualizations/src/components/ChoroplethMap/types.ts

@@ -1,8 +1,8 @@
 import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
 import type { FillLayerSpecification, Popup, GestureOptions, LngLatBoundsLike } from 'maplibre-gl';
 import type { DebouncedFunc } from 'lodash';
-import type { LegendPositions } from '../Legend/types';
-import type { ColorScale, Color, Source } from '../types';
+import type { ColorScale, Color, Source } from 'types';
+import type { LegendPositions } from 'components/Legend/types';
 
 export interface ChoroplethOptions {
     /** Configuration for the color scale used to color the choropleth shapes. */

packages/visualizations/src/components/ChoroplethMap/utils.ts

@@ -4,15 +4,9 @@ import maplibregl, { ExpressionInputType, ExpressionSpecification } from 'maplib
 import { viewport } from '@placemarkio/geo-viewport';
 import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
 import type { Scale } from 'chroma-js';
+import { assertUnreachable } from 'components/utils';
+import { Color, ColorScale, DataBounds, isGroupByForMatchExpression, ColorScaleTypes } from 'types';
 import { DEFAULT_COLORS } from './constants';
-import { assertUnreachable } from '../utils';
-import {
-    Color,
-    ColorScale,
-    DataBounds,
-    isGroupByForMatchExpression,
-    ColorScaleTypes,
-} from '../types';
 
 import type {
     ChoroplethDataValue,

packages/visualizations/src/components/KpiCard/KpiCard.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import tippy from '../utils/tippy';
+    import SourceLink from 'components/utils/SourceLink.svelte';
+    import { defaultCompactNumberFormat, defaultNumberFormat } from 'components/utils/formatter';
+    import tippy from 'components/utils/tippy';
     import type { KpiProps } from './types';
-    import SourceLink from '../utils/SourceLink.svelte';
-    import { defaultCompactNumberFormat, defaultNumberFormat } from '../utils/formatter';
 
     type $$Props = KpiProps;
     export let data: $$Props['data'];