Merge pull request #254 from dnum-mi/tech/add-types

feat: 🏷️ Add type definitions

Author: laruiss

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package-lock.json

@@ -3,7 +3,9 @@
   "version": "1.0.0-beta.35",
   "files": [
     "dist",
-    "types"
+    "types",
+    "LICENSE",
+    "README.md"
   ],
   "engines": {
     "node": "17.x.x",
@@ -23,8 +25,10 @@
     "check-exports": "node ./ci/check-exports.mjs",
     "check-exports-ci": "node ./ci/check-exports.mjs --ci",
     "dev": "npm run storybook",
-    "prebuild": "rimraf dist",
+    "clean-dist": "rimraf dist",
+    "prebuild": "run-s clean-dist gen-types",
     "build": "run-p build:css build:js",
+    "postbuild": "copyfiles types/composable.d.ts dist/composable.d.ts",
     "build:css": "node build-css.mjs",
     "build:js": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "demo-app": "vite",
@@ -37,7 +41,11 @@
     "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepublishOnly": "npm run build",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "vite:build": "vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s src -o types",
+    "typegen": "tsc -d --emitDeclarationOnly && vue-typegen gen -s src -o types",
+    "vue-tsc": "vue-tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
     "@gouvfr/dsfr": "^1.3.1",
@@ -53,6 +61,7 @@
     "@babel/preset-env": "^7.16.11",
     "@cypress/vite-dev-server": "^2.2.2",
     "@cypress/vue": "^3.1.1",
+    "@rushstack/eslint-patch": "^1.1.0",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.2",
@@ -72,20 +81,25 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/user-event": "^13.5.0",
     "@testing-library/vue": "^6.5.1",
+    "@types/jsdom": "^16.2.14",
     "@types/jest": "^27.4.1",
+    "@types/node": "^16.11.25",
     "@types/vue": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "@vitejs/plugin-vue": "^2.2.4",
     "@vitejs/plugin-vue-jsx": "^1.3.8",
     "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/tsconfig": "^0.1.3",
     "@vue/vue3-jest": "^27.0.0-alpha.4",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-import-meta": "^2.1.1",
     "chalk": "^5.0.0",
+    "copyfiles": "^2.4.1",
     "core-js": "^3.21.1",
     "cross-env": "^7.0.3",
     "cypress": "^9.5.1",
@@ -102,6 +116,7 @@
     "jest": "^27.5.1",
     "jest-svg-transformer": "^1.0.0",
     "jest-transform-stub": "^2.0.0",
+    "jsdom": "^19.0.0",
     "lint-staged": "^12.3.4",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.5",
@@ -120,14 +135,18 @@
     "rollup-plugin-visualizer": "^5.6.0",
     "rollup-plugin-vue": "^6.0.0",
     "semantic-release": "^19.0.2",
+    "start-server-and-test": "^1.14.0",
     "storybook-builder-vite": "^0.1.17",
     "ts-jest": "^27.1.3",
     "tsd-jsdoc": "^2.5.0",
     "typescript": "^4.6.2",
     "vite": "^2.8.6",
+    "vitest": "^0.5.0",
     "vue-loader": "^17.0.0",
     "vue-router": "^4.0.13",
     "vue-router-mock": "^0.1.7",
+    "vue-tsc": "^0.32.1",
+    "vue-typegen": "^0.2.0",
     "yorkie": "^2.0.0"
   },
   "peerDependencies": {

package.json

@@ -1,9 +1,10 @@
 <script>
 // import '@gouvfr/dsfr/dist/component/accordion/accordion.module.js'
+import { defineComponent } from 'vue'
 
 import { getRandomId } from '../../utils/random-utils.js'
 
-export default {
+export default defineComponent({
   name: 'DsfrAccordion',
   props: {
     id: {
@@ -36,7 +37,7 @@ export default {
     },
   },
 
-}
+})
 </script>
 
 <template>

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue'
 
 import { getRandomId } from '../../utils/random-utils.js'
@@ -24,18 +24,9 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-    closed: {
-      type: Boolean,
-      default: false,
-    },
-    closeable: {
-      type: Boolean,
-      default: false,
-    },
+    small: Boolean,
+    closed: Boolean,
+    closeable: Boolean,
   },
 
   emits: ['close'],

src/components/DsfrAlert/DsfrAlert.vue

@@ -1,10 +1,12 @@
 <script>
+import { defineComponent } from 'vue'
+
 // TODO: Pourquoi pas d’animation ?
 import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.module.js'
 
 import { getRandomId } from '../../utils/random-utils.js'
 
-export default {
+export default defineComponent({
   name: 'DsfrBreadcrumb',
 
   props: {
@@ -31,7 +33,7 @@ export default {
       return '$nuxt' in this ? 'nuxt-link' : 'router-link'
     },
   },
-}
+})
 </script>
 
 <template>

src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue

@@ -1,7 +1,9 @@
 <script>
+import { defineComponent } from 'vue'
+
 import '@gouvfr/dsfr/dist/component/button/button.module.js'
 
-export default {
+export default defineComponent({
   name: 'DsfrButton',
   props: {
     disabled: Boolean,
@@ -23,7 +25,7 @@ export default {
       this.$refs.btn.focus()
     },
   },
-}
+})
 </script>
 
 <template>

src/components/DsfrButton/DsfrButton.vue

@@ -1,5 +1,6 @@
 <script>
 import { defineComponent } from 'vue'
+
 import DsfrButton from './DsfrButton.vue'
 
 export default defineComponent({

src/components/DsfrButton/DsfrButtonGroup.vue

@@ -1,7 +1,9 @@
 <script>
+import { defineComponent } from 'vue'
+
 import DsfrButton from '../DsfrButton/DsfrButton.vue'
 
-export default {
+export default defineComponent({
   name: 'DsfrCallout',
 
   components: {
@@ -27,7 +29,7 @@ export default {
       required: false,
     },
   },
-}
+})
 </script>
 
 <template>

src/components/DsfrCallout/DsfrCallout.vue

@@ -1,5 +1,7 @@
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'DsfrCard',
 
   props: {
@@ -42,7 +44,7 @@ export default {
       this.$refs.title.querySelector('.fr-card__link').click()
     },
   },
-}
+})
 </script>
 
 <template>