From f4170f24e749c05c21ab0554b36acfa18f710145 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aykut=20Sara=C3=A7?= <aykutsarac0@gmail.com>
Date: Tue, 3 Oct 2023 10:31:44 +0300
Subject: [PATCH] chore(vue): add vue typescript support (#726)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR brings official TypeScript declerations support for projects
with Vue 2.7 and above.
Added docs to storybook.

Output:
```ts

import type * as Baklava from '@trendyol/baklava/dist/baklava'

declare module 'vue' {
  export interface GlobalComponents {
    BlAlert: import("vue").Component<Baklava.BlAlert>
    BlBadge: import("vue").Component<Baklava.BlBadge>
    BlButton: import("vue").Component<Baklava.BlButton>
    BlCheckboxGroup: import("vue").Component<Baklava.BlCheckboxGroup>
    BlDialog: import("vue").Component<Baklava.BlDialog>
    BlDrawer: import("vue").Component<Baklava.BlDrawer>
    BlDropdown: import("vue").Component<Baklava.BlDropdown>
    BlIcon: import("vue").Component<Baklava.BlIcon>
    BlInput: import("vue").Component<Baklava.BlInput>
    BlPagination: import("vue").Component<Baklava.BlPagination>
    BlPopover: import("vue").Component<Baklava.BlPopover>
    BlProgressIndicator: import("vue").Component<Baklava.BlProgressIndicator>
    BlRadioGroup: import("vue").Component<Baklava.BlRadioGroup>
    BlSelect: import("vue").Component<Baklava.BlSelect>
    BlSwitch: import("vue").Component<Baklava.BlSwitch>
    BlTabGroup: import("vue").Component<Baklava.BlTabGroup>
    BlTextarea: import("vue").Component<Baklava.BlTextarea>
    BlTooltip: import("vue").Component<Baklava.BlTooltip>
  }
}
```

---------

Co-authored-by: Aykut Saraç <aykut.sarac@trendyol.com>
---
 docs/using-baklava-in-vue.stories.mdx |  7 +++++++
 package.json                          |  5 +++--
 scripts/generate-vue-types.js         | 18 ++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 scripts/generate-vue-types.js

diff --git a/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx
index 6511efda..1241ad98 100644
--- a/docs/using-baklava-in-vue.stories.mdx
+++ b/docs/using-baklava-in-vue.stories.mdx
@@ -86,6 +86,13 @@ Also, you can add ignore rule as compiler options to your webpack or vite.
 }
 ```
 
+### TypeScript
+
+Baklava offers TypeScript support for Vue versions 2.7 and higher. To enable this support, you should create a file named `components.d.ts` within the "src" directory and include the following line:
+```ts
+/// <reference types="@trendyol/baklava/dist/baklava-vue.d.ts" />
+```
+
 #### Eslint Configuration
 
 Baklava components are developed with `kebab case`. Eslint uses `pascal case` by default. If you are using eslint in your project, it will automatically convert the baklava components to `pascal case`. To prevent this, you need to turn off the `pascal case` rule in your project.
diff --git a/package.json b/package.json
index de238de1..ec978e51 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "start": "npm run storybook:dev",
     "analyze": "cem analyze",
     "commit": "commit",
-    "build": "del-cli dist/ && npm run analyze && npm run generate-react-exports && tsc --emitDeclarationOnly && node scripts/build.js",
+    "build": "del-cli dist/ && npm run analyze && npm run generate-react-exports && tsc --emitDeclarationOnly && node scripts/build.js && npm run generate-vue-types",
     "build-storybook": "NODE_ENV=production storybook build -o storybook-static",
     "build-storybook-docs": "storybook build --docs",
     "serve": "node scripts/build.js --serve",
@@ -54,7 +54,8 @@
     "test:watch": "web-test-runner --coverage --watch",
     "test:debug": "web-test-runner --coverage --watch --debug",
     "test:headless": "web-test-runner --coverage --watch --debug --headless",
-    "generate-react-exports": "node scripts/generate-react-exports.js"
+    "generate-react-exports": "node scripts/generate-react-exports.js",
+    "generate-vue-types": "node scripts/generate-vue-types.js"
   },
   "keywords": [
     "web-components",
diff --git a/scripts/generate-vue-types.js b/scripts/generate-vue-types.js
new file mode 100644
index 00000000..09fca067
--- /dev/null
+++ b/scripts/generate-vue-types.js
@@ -0,0 +1,18 @@
+import fs from "fs";
+
+const components = JSON.parse(fs.readFileSync("./dist/custom-elements.json", "utf-8"));
+const declerations = components.modules.flatMap(module => module.declarations);
+const customElements = declerations.filter(declaration => declaration.customElement === true);
+const customElementNames = customElements.map(customElement => customElement.name);
+
+const code = `
+import type * as Baklava from '@trendyol/baklava/dist/baklava'
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ${customElementNames.map(component => `${component}: import("vue").Component<Baklava.${component}>`).join('\n    ')}
+  }
+}
+`
+
+fs.writeFileSync("./dist/baklava-vue.d.ts", code);