✨ Added intellisense support for component properties in VsCode

Adyen · Sep 18, 2024 · 4d99381 · 4d99381
1 parent 5c768da
commit 4d99381
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 2 deletions.
diff --git a/packages/lib/src/global-components.d.ts b/packages/lib/src/global-components.d.ts
@@ -0,0 +1,62 @@
+/**
+ * This file is used to add intellisense for components in VsCode.
+ * @see https://github.com/vuejs/language-tools/blob/d8ed4c08389771668b6bb13b77e0c0965cc0e3df/extensions/vscode/README.md?plain=1#L87
+ */
+
+import {
+    LumeAlluvialDiagram,
+    LumeBarChart,
+    LumeSingleBarChart,
+    LumeGroupedBarChart,
+    LumeStackedBarChart,
+    LumeLineChart,
+    LumeSparklineChart,
+    LumeAxis,
+    LumeChart,
+    LumeChartContainer,
+    LumeChartLegend,
+    LumeTooltip,
+    LumeTooltipItem,
+    LumeTooltipSummary,
+    LumeTooltipTitle,
+    LumeBar,
+    LumeLine,
+    LumePoint,
+    LumeAlluvialGroup,
+    LumeAlluvialNodeLabel,
+    LumeAlluvialNodeValue,
+    LumeAlluvialNodeHeader,
+    LumeBarGroup,
+    LumeLineGroup,
+    LumeOverlayGroup
+} from './index';
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        LumeAlluvialDiagram: typeof LumeAlluvialDiagram;
+        LumeBarChart: typeof LumeBarChart;
+        LumeSingleBarChart: typeof LumeSingleBarChart;
+        LumeGroupedBarChart: typeof LumeGroupedBarChart;
+        LumeStackedBarChart: typeof LumeStackedBarChart;
+        LumeLineChart: typeof LumeLineChart;
+        LumeSparklineChart: typeof LumeSparklineChart;
+        LumeAxis: typeof LumeAxis;
+        LumeChart: typeof LumeChart;
+        LumeChartContainer: typeof LumeChartContainer;
+        LumeChartLegend: typeof LumeChartLegend;
+        LumeTooltip: typeof LumeTooltip;
+        LumeTooltipItem: typeof LumeTooltipItem;
+        LumeTooltipSummary: typeof LumeTooltipSummary;
+        LumeTooltipTitle: typeof LumeTooltipTitle;
+        LumeBar: typeof LumeBar;
+        LumeLine: typeof LumeLine;
+        LumePoint: typeof LumePoint;
+        LumeAlluvialGroup: typeof LumeAlluvialGroup;
+        LumeAlluvialNodeLabel: typeof LumeAlluvialNodeLabel;
+        LumeAlluvialNodeValue: typeof LumeAlluvialNodeValue;
+        LumeAlluvialNodeHeader: typeof LumeAlluvialNodeHeader;
+        LumeBarGroup: typeof LumeBarGroup;
+        LumeLineGroup: typeof LumeLineGroup;
+        LumeOverlayGroup: typeof LumeOverlayGroup;
+    }
+}
diff --git a/packages/vue2/package.json b/packages/vue2/package.json
@@ -20,10 +20,11 @@
   },
   "types": "./dist/@types/index.d.ts",
   "scripts": {
-    "build": "NODE_ENV=production pnpm run build:vite && pnpm run build:font && pnpm run build:types",
+    "build": "NODE_ENV=production pnpm run build:vite && pnpm run build:font && pnpm run build:types && pnpm run build:copy-components-defs",
     "build:vite": "vite build",
     "build:font": "webpack",
     "build:types": "vue-tsc -p ./tsconfig.d.json",
+    "build:copy-components-defs": "cp ../lib/src/global-components.d.ts dist/@types/components.d.ts",
     "pack": "pnpm pack --pack-destination ../../",
     "postbuild": "node ../../build/postbuild.js",
     "storybook": "sb dev -p 9002 -c .storybook"

diff --git a/packages/vue3/package.json b/packages/vue3/package.json
@@ -20,11 +20,12 @@
   },
   "types": "./dist/@types/index.d.ts",
   "scripts": {
-    "build": "NODE_ENV=production pnpm run build:vite && pnpm run build:font && pnpm run build:types",
+    "build": "NODE_ENV=production pnpm run build:vite && pnpm run build:font && pnpm run build:types && pnpm run build:copy-components-defs",
     "build:vite": "vite build",
     "build:font": "webpack",
     "build:storybook": "sb build -c .storybook",
     "build:types": "vue-tsc -p ./tsconfig.d.json",
+    "build:copy-components-defs": "cp ../lib/src/global-components.d.ts dist/@types/components.d.ts",
     "pack": "pnpm pack --pack-destination ../../",
     "postbuild": "node ../../build/postbuild.js",
     "storybook": "sb dev -p 9003 -c .storybook",