From 67e73a0f1659a07e8508d58631153eb909dc7f8c Mon Sep 17 00:00:00 2001 From: Slava Terekhov Date: Thu, 17 Mar 2022 13:59:40 +0400 Subject: [PATCH] feat: typescript support (#757) * chore: add typescript add typescript and change project configs BREAKING CHANGE: add typescript * refactor: rewrite code to typescript * fix: change interface name * feat: remove unused global var * feat: remove old types folder * feat: add eslintignore * feat: add typescript to sandboxes * feat: rewrite stories to typescript * feat: rewrite tests to typescript * feat: fix app exports and props types * feat: add tests for type definitions * fix: fix clean-publish config * fix: fix clean-publish config again * feat: add storybook build check --- .clean-publish | 4 +- .eslintignore | 2 + .eslintrc.js | 13 +- .github/workflows/checks.yml | 41 ++ .storybook/main.js | 2 +- package.json | 20 +- pnpm-lock.yaml | 420 +++++++++++++++--- sandboxes/bar/package.json | 5 +- sandboxes/bar/src/App.vue | 2 +- .../components/{barChart.vue => barChart.ts} | 13 +- sandboxes/bubble/package.json | 5 +- sandboxes/bubble/src/App.vue | 2 +- .../{bubbleChart.vue => bubbleChart.ts} | 12 +- sandboxes/custom/package.json | 5 +- sandboxes/custom/src/App.vue | 2 +- .../{customChart.vue => customChart.ts} | 20 +- sandboxes/doughnut/package.json | 5 +- sandboxes/doughnut/src/App.vue | 2 +- .../{doughnutChart.vue => doughnutChart.ts} | 11 +- sandboxes/line/package.json | 5 +- sandboxes/line/src/App.vue | 2 +- .../{lineChart.vue => lineChart.ts} | 11 +- sandboxes/pie/package.json | 5 +- sandboxes/pie/src/App.vue | 2 +- .../components/{pieChart.vue => pieChart.ts} | 11 +- sandboxes/polar-area/package.json | 5 +- sandboxes/polar-area/src/App.vue | 2 +- .../{polarAreaChart.vue => polarAreaChart.ts} | 11 +- sandboxes/radar/package.json | 5 +- sandboxes/radar/src/App.vue | 2 +- .../{radarChart.vue => radarChart.ts} | 11 +- sandboxes/reactive-prop/package.json | 5 +- sandboxes/reactive-prop/src/App.vue | 2 +- ...tivePropChart.vue => reactivePropChart.ts} | 17 +- ...activePropPage.vue => reactivePropPage.ts} | 11 +- sandboxes/reactive/package.json | 5 +- sandboxes/reactive/src/App.vue | 2 +- .../{reactiveChart.vue => reactiveChart.ts} | 16 +- sandboxes/scatter/package.json | 5 +- sandboxes/scatter/src/App.vue | 2 +- .../{scatterChart.vue => scatterChart.ts} | 11 +- sandboxes/tsconfig.json | 10 + src/{BaseCharts.js => BaseCharts.ts} | 162 ++++--- src/index.js | 23 - src/index.ts | 1 + src/types.ts | 91 ++++ src/utils.js | 96 ---- src/utils.ts | 164 +++++++ stories/{bar.stories.js => bar.stories.ts} | 2 +- .../{bubble.stories.js => bubble.stories.ts} | 2 +- .../{custom.stories.js => custom.stories.ts} | 2 +- ...oughnut.stories.js => doughnut.stories.ts} | 2 +- stories/{line.stories.js => line.stories.ts} | 2 +- stories/{pie.stories.js => pie.stories.ts} | 2 +- ...arArea.stories.js => polarArea.stories.ts} | 2 +- .../{radar.stories.js => radar.stories.ts} | 2 +- ...eactive.stories.js => reactive.stories.ts} | 2 +- ...rop.stories.js => reactiveProp.stories.ts} | 2 +- ...{scatter.stories.js => scatter.stories.ts} | 2 +- test/{Bar.spec.js => Bar.spec.ts} | 2 +- test/{Bubble.spec.js => Bubble.spec.ts} | 2 +- test/ChartsTypes.test-d.ts | 55 +++ ...ustomChart.spec.js => CustomChart.spec.ts} | 2 +- test/{Doughnut.spec.js => Doughnut.spec.ts} | 2 +- test/{Line.spec.js => Line.spec.ts} | 2 +- test/{Pie.spec.js => Pie.spec.ts} | 2 +- test/{PolarArea.spec.js => PolarArea.spec.ts} | 2 +- test/{Radar.spec.js => Radar.spec.ts} | 2 +- test/{Reactive.spec.js => Reactive.spec.ts} | 2 +- ...ctiveProp.spec.js => ReactiveProp.spec.ts} | 2 +- test/{Scatter.spec.js => Scatter.spec.ts} | 2 +- test/examples/{BarChart.vue => BarChart.ts} | 15 +- .../{BubbleChart.vue => BubbleChart.ts} | 14 +- .../{CustomChart.vue => CustomChart.ts} | 22 +- .../{DoughnutChart.vue => DoughnutChart.ts} | 13 +- test/examples/{LineChart.vue => LineChart.ts} | 13 +- test/examples/{PieChart.vue => PieChart.ts} | 13 +- .../{PolarAreaChart.vue => PolarAreaChart.ts} | 13 +- .../{RadarChart.vue => RadarChart.ts} | 13 +- .../{ReactiveChart.vue => ReactiveChart.ts} | 18 +- ...tivePropChart.vue => ReactivePropChart.ts} | 17 +- .../{ScatterChart.vue => ScatterChart.ts} | 13 +- tsconfig.json | 39 ++ types/components.d.ts | 8 - types/index.d.ts | 20 - types/mixins.d.ts | 10 - 86 files changed, 1100 insertions(+), 521 deletions(-) create mode 100644 .eslintignore rename sandboxes/bar/src/components/{barChart.vue => barChart.ts} (87%) rename sandboxes/bubble/src/components/{bubbleChart.vue => bubbleChart.ts} (89%) rename sandboxes/custom/src/components/{customChart.vue => customChart.ts} (85%) rename sandboxes/doughnut/src/components/{doughnutChart.vue => doughnutChart.ts} (85%) rename sandboxes/line/src/components/{lineChart.vue => lineChart.ts} (85%) rename sandboxes/pie/src/components/{pieChart.vue => pieChart.ts} (85%) rename sandboxes/polar-area/src/components/{polarAreaChart.vue => polarAreaChart.ts} (89%) rename sandboxes/radar/src/components/{radarChart.vue => radarChart.ts} (90%) rename sandboxes/reactive-prop/src/components/{reactivePropChart.vue => reactivePropChart.ts} (76%) rename sandboxes/reactive-prop/src/components/{reactivePropPage.vue => reactivePropPage.ts} (91%) rename sandboxes/reactive/src/components/{reactiveChart.vue => reactiveChart.ts} (87%) rename sandboxes/scatter/src/components/{scatterChart.vue => scatterChart.ts} (90%) create mode 100644 sandboxes/tsconfig.json rename src/{BaseCharts.js => BaseCharts.ts} (51%) delete mode 100644 src/index.js create mode 100644 src/index.ts create mode 100644 src/types.ts delete mode 100644 src/utils.js create mode 100644 src/utils.ts rename stories/{bar.stories.js => bar.stories.ts} (84%) rename stories/{bubble.stories.js => bubble.stories.ts} (97%) rename stories/{custom.stories.js => custom.stories.ts} (97%) rename stories/{doughnut.stories.js => doughnut.stories.ts} (96%) rename stories/{line.stories.js => line.stories.ts} (98%) rename stories/{pie.stories.js => pie.stories.ts} (84%) rename stories/{polarArea.stories.js => polarArea.stories.ts} (95%) rename stories/{radar.stories.js => radar.stories.ts} (97%) rename stories/{reactive.stories.js => reactive.stories.ts} (96%) rename stories/{reactiveProp.stories.js => reactiveProp.stories.ts} (98%) rename stories/{scatter.stories.js => scatter.stories.ts} (96%) rename test/{Bar.spec.js => Bar.spec.ts} (96%) rename test/{Bubble.spec.js => Bubble.spec.ts} (95%) create mode 100644 test/ChartsTypes.test-d.ts rename test/{CustomChart.spec.js => CustomChart.spec.ts} (86%) rename test/{Doughnut.spec.js => Doughnut.spec.ts} (95%) rename test/{Line.spec.js => Line.spec.ts} (95%) rename test/{Pie.spec.js => Pie.spec.ts} (96%) rename test/{PolarArea.spec.js => PolarArea.spec.ts} (95%) rename test/{Radar.spec.js => Radar.spec.ts} (95%) rename test/{Reactive.spec.js => Reactive.spec.ts} (86%) rename test/{ReactiveProp.spec.js => ReactiveProp.spec.ts} (87%) rename test/{Scatter.spec.js => Scatter.spec.ts} (95%) rename test/examples/{BarChart.vue => BarChart.ts} (85%) rename test/examples/{BubbleChart.vue => BubbleChart.ts} (88%) rename test/examples/{CustomChart.vue => CustomChart.ts} (83%) rename test/examples/{DoughnutChart.vue => DoughnutChart.ts} (83%) rename test/examples/{LineChart.vue => LineChart.ts} (83%) rename test/examples/{PieChart.vue => PieChart.ts} (83%) rename test/examples/{PolarAreaChart.vue => PolarAreaChart.ts} (88%) rename test/examples/{RadarChart.vue => RadarChart.ts} (88%) rename test/examples/{ReactiveChart.vue => ReactiveChart.ts} (86%) rename test/examples/{ReactivePropChart.vue => ReactivePropChart.ts} (76%) rename test/examples/{ScatterChart.vue => ScatterChart.ts} (89%) create mode 100644 tsconfig.json delete mode 100644 types/components.d.ts delete mode 100644 types/index.d.ts delete mode 100644 types/mixins.d.ts diff --git a/.clean-publish b/.clean-publish index 711387ff..c8a9e5b8 100644 --- a/.clean-publish +++ b/.clean-publish @@ -1,4 +1,6 @@ { "withoutPublish": true, - "tempDir": "package" + "tempDir": "package", + "fields": ["tsd"], + "files": ["docs"] } diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..3dddf3f6 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +dist/* +node_modules/* diff --git a/.eslintrc.js b/.eslintrc.js index 643d2a8e..125f244a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,7 +1,7 @@ module.exports = { root: true, parserOptions: { - sourceType: 'module', + sourceType: 'module' }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: [ @@ -9,6 +9,8 @@ module.exports = { 'plugin:prettier/recommended', 'plugin:vue/recommended', 'plugin:prettier-vue/recommended', + 'plugin:vue/vue3-essential', + '@vue/eslint-config-typescript' ], // required to lint *.vue files plugins: ['prettier'], @@ -19,9 +21,6 @@ module.exports = { // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'prettier/prettier': 'error', - quotes: [2, 'single', 'avoid-escape'], - }, - globals: { - LIB_VERSION: true, - }, -}; + quotes: [2, 'single', 'avoid-escape'] + } +} diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index c844df07..3bc2c25a 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -26,3 +26,44 @@ jobs: uses: andresz1/size-limit-action@master with: github_token: ${{ secrets.GITHUB_TOKEN }} + typings: + runs-on: ubuntu-latest + name: typings + steps: + - name: Checkout the repository + uses: actions/checkout@v2 + - name: Install pnpm + uses: pnpm/action-setup@v2.0.1 + with: + version: 6 + - name: Install Node.js + uses: actions/setup-node@v2 + with: + node-version: 16 + cache: 'pnpm' + - name: Install dependencies + run: pnpm install + - name: Prebuild + run: pnpm build + - name: Check typings + if: success() + run: pnpm test:typings + storybook: + runs-on: ubuntu-latest + name: storybook + steps: + - name: Checkout the repository + uses: actions/checkout@v2 + - name: Install pnpm + uses: pnpm/action-setup@v2.0.1 + with: + version: 6 + - name: Install Node.js + uses: actions/setup-node@v2 + with: + node-version: 16 + cache: 'pnpm' + - name: Install dependencies + run: pnpm install + - name: Check storybook + run: pnpm build:storybook diff --git a/.storybook/main.js b/.storybook/main.js index 6ac5bccd..c3c5f864 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -7,7 +7,7 @@ module.exports = { webpackFinal: async config => { config.resolve.alias['vue-chartjs'] = path.resolve( __dirname, - '../src/index.js' + '../src/index.ts' ) return config } diff --git a/package.json b/package.json index 3f090a6e..5957c30d 100644 --- a/package.json +++ b/package.json @@ -37,8 +37,8 @@ "Charts" ], "sideEffects": false, - "main": "./src/index.js", - "typings": "./dist/index.d.ts", + "main": "./src/index.ts", + "types": "./dist/index.d.ts", "publishConfig": { "main": "./dist/index.cjs", "module": "./dist/index.js", @@ -47,17 +47,20 @@ "scripts": { "prepublishOnly": "pnpm test && pnpm build && del ./package && clean-publish", "postpublish": "del ./package", - "build": "rollup -c", + "emitDeclarations": "tsc --emitDeclarationOnly", + "build": "rollup -c & pnpm emitDeclarations", "unit": "jest -c jest.config.json", "test": "pnpm lint && pnpm unit", "test:size": "size-limit", - "lint": "eslint --ext .js,.vue src test", + "test:typings": "tsd", + "lint": "eslint 'src/**/*.ts'", "format": "prettier --write src test", "release": "standard-version", "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs", "commit": "cz", - "start:storybook": "start-storybook -p 6006" + "start:storybook": "start-storybook -p 6006", + "build:storybook": "del ./storybook-static; NODE_ENV=production build-storybook" }, "peerDependencies": { "chart.js": "^3.7.0" @@ -75,7 +78,9 @@ "@swc/core": "^1.2.120", "@swc/helpers": "^0.3.2", "@swc/jest": "^0.2.15", + "@types/jest": "^27.4.1", "@vitejs/plugin-vue": "^2.2.2", + "@vue/eslint-config-typescript": "^10.0.0", "@vue/test-utils": "^2.0.0-rc.17", "@vue/vue3-jest": "^27.0.0-alpha.4", "babel-jest": "^27.4.5", @@ -106,9 +111,14 @@ "simple-git-hooks": "^2.7.0", "size-limit": "^7.0.8", "standard-version": "^9.3.2", + "tsd": "^0.19.1", + "typescript": "^4.6.2", "vite": "^2.8.6", "vue": "^3.2.31", "vue-loader": "^17.0.0", "vuepress": "^0.14.4" + }, + "tsd": { + "directory": "./test" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8777516..f3bb60ca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,9 @@ specifiers: '@swc/core': ^1.2.120 '@swc/helpers': ^0.3.2 '@swc/jest': ^0.2.15 + '@types/jest': ^27.4.1 '@vitejs/plugin-vue': ^2.2.2 + '@vue/eslint-config-typescript': ^10.0.0 '@vue/test-utils': ^2.0.0-rc.17 '@vue/vue3-jest': ^27.0.0-alpha.4 babel-jest: ^27.4.5 @@ -44,6 +46,8 @@ specifiers: simple-git-hooks: ^2.7.0 size-limit: ^7.0.8 standard-version: ^9.3.2 + tsd: ^0.19.1 + typescript: ^4.6.2 vite: ^2.8.6 vue: ^3.2.31 vue-loader: ^17.0.0 @@ -57,14 +61,16 @@ devDependencies: '@rollup/plugin-node-resolve': 13.1.3_rollup@2.66.1 '@size-limit/preset-big-lib': 7.0.8_070b32a7cd5b24e1aa86940aabf66c67 '@storybook/addon-actions': 6.4.13 - '@storybook/addon-essentials': 6.4.13_5a939804e507bbcdc9a6b0dc26ed10af - '@storybook/vue3': 6.4.19_9acdbe7dd6547c318b6d3fe71f0ccc31 + '@storybook/addon-essentials': 6.4.13_d6bb44e1acc0edc65da507f152026f9c + '@storybook/vue3': 6.4.19_6fabd474ce48a9cba2517de27444e050 '@swc/core': 1.2.120 '@swc/helpers': 0.3.2 '@swc/jest': 0.2.15_@swc+core@1.2.120 + '@types/jest': 27.4.1 '@vitejs/plugin-vue': 2.2.2_vite@2.8.6+vue@3.2.31 + '@vue/eslint-config-typescript': 10.0.0_3991ff270b21162cb7043e22198f90cc '@vue/test-utils': 2.0.0-rc.17_vue@3.2.31 - '@vue/vue3-jest': 27.0.0-alpha.4_086e071c456560e3f52577ca51f14fd3 + '@vue/vue3-jest': 27.0.0-alpha.4_4e1ea214410aa521ed12ff5681f807c8 babel-jest: 27.4.5_@babel+core@7.16.5 babel-loader: 8.2.3_@babel+core@7.16.5 browserslist: 4.19.1 @@ -93,6 +99,8 @@ devDependencies: simple-git-hooks: 2.7.0 size-limit: 7.0.8 standard-version: 9.3.2 + tsd: 0.19.1 + typescript: 4.6.2 vite: 2.8.6 vue: 3.2.31 vue-loader: 17.0.0 @@ -3329,12 +3337,12 @@ packages: '@commitlint/execute-rule': 15.0.0 '@commitlint/resolve-extends': 15.0.0 '@commitlint/types': 15.0.0 - '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_f1e39502f5444cf4e1bb49a6f24fb32b + '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_c84a270c92bf6e8d30a9786dab5936e4 chalk: 4.1.2 cosmiconfig: 7.0.1 lodash: 4.17.21 resolve-from: 5.0.0 - typescript: 4.5.3 + typescript: 4.6.2 dev: true /@commitlint/load/16.2.1_@swc+core@1.2.120: @@ -3349,10 +3357,10 @@ packages: '@types/node': 17.0.18 chalk: 4.1.2 cosmiconfig: 7.0.1 - cosmiconfig-typescript-loader: 1.0.5_85b573b50bd3c98a25ceb530199c078f + cosmiconfig-typescript-loader: 1.0.5_b277d3279beba5662cbe91a0867ec5fc lodash: 4.17.21 resolve-from: 5.0.0 - typescript: 4.5.3 + typescript: 4.6.2 transitivePeerDependencies: - '@swc/core' - '@swc/wasm' @@ -3601,7 +3609,7 @@ packages: resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==} dev: true - /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_f1e39502f5444cf4e1bb49a6f24fb32b: + /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_c84a270c92bf6e8d30a9786dab5936e4: resolution: {integrity: sha512-QRVtqJuS1mcT56oHpVegkKBlgtWjXw/gHNWO3eL9oyB5Sc7HBoc2OLG/nYpVfT/Jejvo3NUrD0Udk7XgoyDKkA==} engines: {node: '>=10.0.0'} peerDependencies: @@ -3610,7 +3618,7 @@ packages: cosmiconfig: 7.0.1 lodash.get: 4.4.2 make-error: 1.3.6 - ts-node: 9.1.1_typescript@4.5.3 + ts-node: 9.1.1_typescript@4.6.2 tslib: 2.3.1 transitivePeerDependencies: - typescript @@ -4191,7 +4199,7 @@ packages: - '@types/react' dev: true - /@storybook/addon-controls/6.4.13_eslint@7.28.0: + /@storybook/addon-controls/6.4.13_eslint@7.28.0+typescript@4.6.2: resolution: {integrity: sha512-XDaeYcwCi4qQ8hGXn4Mbdb6CQGGfZoBm5UjUaWBjDJdo54AyZv3VYdNgWFdiitqk5LRyh2omHD54EditM774NQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -4206,7 +4214,7 @@ packages: '@storybook/api': 6.4.13 '@storybook/client-logger': 6.4.13 '@storybook/components': 6.4.13 - '@storybook/core-common': 6.4.13_eslint@7.28.0 + '@storybook/core-common': 6.4.13_eslint@7.28.0+typescript@4.6.2 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/node-logger': 6.4.13 '@storybook/store': 6.4.13 @@ -4224,7 +4232,7 @@ packages: - webpack-command dev: true - /@storybook/addon-docs/6.4.13_ed0ab9fbf576d931b0077b2bc14bdba8: + /@storybook/addon-docs/6.4.13_c449280f9bceb922d9f05f236c23e589: resolution: {integrity: sha512-frsHcZD3jabIXxYkenwigJhAiqmbeBztc1cUTMWSZ9kVDJN6h2msq/vD0LEotfjcvDe3XS2HZgBjdDJ1UUUj/g==} peerDependencies: '@storybook/angular': 6.4.13 @@ -4282,10 +4290,10 @@ packages: '@mdx-js/react': 1.6.22 '@storybook/addons': 6.4.13 '@storybook/api': 6.4.13 - '@storybook/builder-webpack4': 6.4.13_acorn@7.4.1+eslint@7.28.0 + '@storybook/builder-webpack4': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e '@storybook/client-logger': 6.4.13 '@storybook/components': 6.4.13 - '@storybook/core': 6.4.13_acorn@7.4.1+eslint@7.28.0 + '@storybook/core': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e '@storybook/core-events': 6.4.13 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/csf-tools': 6.4.13 @@ -4295,7 +4303,7 @@ packages: '@storybook/source-loader': 6.4.13 '@storybook/store': 6.4.13 '@storybook/theming': 6.4.13 - '@storybook/vue3': 6.4.19_9acdbe7dd6547c318b6d3fe71f0ccc31 + '@storybook/vue3': 6.4.19_6fabd474ce48a9cba2517de27444e050 acorn: 7.4.1 acorn-jsx: 5.3.2_acorn@7.4.1 acorn-walk: 7.2.0 @@ -4333,7 +4341,7 @@ packages: - webpack-command dev: true - /@storybook/addon-essentials/6.4.13_5a939804e507bbcdc9a6b0dc26ed10af: + /@storybook/addon-essentials/6.4.13_d6bb44e1acc0edc65da507f152026f9c: resolution: {integrity: sha512-ekvyeVckKkffGQMzp6cT0/Mi8Wo1fqF/DGp3vJIcIrExfvuZa/qi8PoHyx+cr8dfI0b8Jf8Lv7qcLIxNnkA5Bg==} peerDependencies: '@babel/core': ^7.9.6 @@ -4361,8 +4369,8 @@ packages: '@babel/core': 7.16.5 '@storybook/addon-actions': 6.4.13 '@storybook/addon-backgrounds': 6.4.13 - '@storybook/addon-controls': 6.4.13_eslint@7.28.0 - '@storybook/addon-docs': 6.4.13_ed0ab9fbf576d931b0077b2bc14bdba8 + '@storybook/addon-controls': 6.4.13_eslint@7.28.0+typescript@4.6.2 + '@storybook/addon-docs': 6.4.13_c449280f9bceb922d9f05f236c23e589 '@storybook/addon-measure': 6.4.13 '@storybook/addon-outline': 6.4.13 '@storybook/addon-toolbars': 6.4.13 @@ -4583,7 +4591,7 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/builder-webpack4/6.4.13_acorn@7.4.1+eslint@7.28.0: + /@storybook/builder-webpack4/6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e: resolution: {integrity: sha512-Vjvje/XpFirVY6bOU+ahS2niapjA0Qams5jBE8YnPUhbigqsLOMMpnJ+C505xC6S5VW0lMkhJpCQ1NQyva3sRw==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -4621,7 +4629,7 @@ packages: '@storybook/client-api': 6.4.13 '@storybook/client-logger': 6.4.13 '@storybook/components': 6.4.13 - '@storybook/core-common': 6.4.13_eslint@7.28.0 + '@storybook/core-common': 6.4.13_eslint@7.28.0+typescript@4.6.2 '@storybook/core-events': 6.4.13 '@storybook/node-logger': 6.4.13 '@storybook/preview-web': 6.4.13 @@ -4646,7 +4654,7 @@ packages: glob-promise: 3.4.0_glob@7.2.0 global: 4.4.0 html-webpack-plugin: 4.5.2_webpack@4.46.0 - pnp-webpack-plugin: 1.6.4 + pnp-webpack-plugin: 1.6.4_typescript@4.6.2 postcss: 7.0.39 postcss-flexbugs-fixes: 4.2.1 postcss-loader: 4.3.0_postcss@7.0.39+webpack@4.46.0 @@ -4655,6 +4663,7 @@ packages: style-loader: 1.3.0_webpack@4.46.0 terser-webpack-plugin: 4.2.3_acorn@7.4.1+webpack@4.46.0 ts-dedent: 2.2.0 + typescript: 4.6.2 url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 util-deprecate: 1.0.2 webpack: 4.46.0 @@ -4672,7 +4681,7 @@ packages: - webpack-command dev: true - /@storybook/builder-webpack4/6.4.19_20a16e7548cf3623e0d86e2848596cc6: + /@storybook/builder-webpack4/6.4.19_7706808a552eb6e46287b90885c9e482: resolution: {integrity: sha512-wxA6SMH11duc9D53aeVVBwrVRemFIoxHp/dOugkkg6ZZFAb4ZmWzf/ENc3vQIZdZpfNRi7IZIZEOfoHc994cmw==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -4710,7 +4719,7 @@ packages: '@storybook/client-api': 6.4.19_react-dom@16.14.0+react@16.14.0 '@storybook/client-logger': 6.4.19 '@storybook/components': 6.4.19_react-dom@16.14.0+react@16.14.0 - '@storybook/core-common': 6.4.19_20a16e7548cf3623e0d86e2848596cc6 + '@storybook/core-common': 6.4.19_7706808a552eb6e46287b90885c9e482 '@storybook/core-events': 6.4.19 '@storybook/node-logger': 6.4.19 '@storybook/preview-web': 6.4.19_react-dom@16.14.0+react@16.14.0 @@ -4735,7 +4744,7 @@ packages: glob-promise: 3.4.0_glob@7.2.0 global: 4.4.0 html-webpack-plugin: 4.5.2_webpack@4.46.0 - pnp-webpack-plugin: 1.6.4 + pnp-webpack-plugin: 1.6.4_typescript@4.6.2 postcss: 7.0.39 postcss-flexbugs-fixes: 4.2.1 postcss-loader: 4.3.0_postcss@7.0.39+webpack@4.46.0 @@ -4746,6 +4755,7 @@ packages: style-loader: 1.3.0_webpack@4.46.0 terser-webpack-plugin: 4.2.3_webpack@4.46.0 ts-dedent: 2.2.0 + typescript: 4.6.2 url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 util-deprecate: 1.0.2 webpack: 4.46.0 @@ -4965,7 +4975,7 @@ packages: - '@types/react' dev: true - /@storybook/core-client/6.4.13: + /@storybook/core-client/6.4.13_typescript@4.6.2: resolution: {integrity: sha512-1m7cAlF16mtVdSNmP8a4z00GCkw2dMyUyJX8snzgYGLD5FaqPLyNGJIidqllHsBUXBfEL2FSu+E9QygK12+O1w==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -4994,13 +5004,14 @@ packages: qs: 6.10.3 regenerator-runtime: 0.13.9 ts-dedent: 2.2.0 + typescript: 4.6.2 unfetch: 4.2.0 util-deprecate: 1.0.2 transitivePeerDependencies: - '@types/react' dev: true - /@storybook/core-client/6.4.13_webpack@4.46.0: + /@storybook/core-client/6.4.13_typescript@4.6.2+webpack@4.46.0: resolution: {integrity: sha512-1m7cAlF16mtVdSNmP8a4z00GCkw2dMyUyJX8snzgYGLD5FaqPLyNGJIidqllHsBUXBfEL2FSu+E9QygK12+O1w==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -5029,6 +5040,7 @@ packages: qs: 6.10.3 regenerator-runtime: 0.13.9 ts-dedent: 2.2.0 + typescript: 4.6.2 unfetch: 4.2.0 util-deprecate: 1.0.2 webpack: 4.46.0 @@ -5036,7 +5048,7 @@ packages: - '@types/react' dev: true - /@storybook/core-client/6.4.19_e97e5e3809294a3414549b4ba42cd203: + /@storybook/core-client/6.4.19_1e23a0fa29879f8bdd5a0b4c23f44c1d: resolution: {integrity: sha512-rQHRZjhArPleE7/S8ZUolgzwY+hC0smSKX/3PQxO2GcebDjnJj6+iSV3h+aSMHMmTdoCQvjYw9aBpT8scuRe+A==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -5067,6 +5079,7 @@ packages: react-dom: 16.14.0_react@16.14.0 regenerator-runtime: 0.13.9 ts-dedent: 2.2.0 + typescript: 4.6.2 unfetch: 4.2.0 util-deprecate: 1.0.2 webpack: 4.46.0 @@ -5074,7 +5087,7 @@ packages: - '@types/react' dev: true - /@storybook/core-common/6.4.13_eslint@7.28.0: + /@storybook/core-common/6.4.13_eslint@7.28.0+typescript@4.6.2: resolution: {integrity: sha512-KoFa4yktuqWsW+/O6uc7iba25X9eKhp80l9tHsa1RWE94mQdCBUo5VsNoe35JvqFSDOspQ+brCe6vBUaIYe+cQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -5117,7 +5130,7 @@ packages: express: 4.17.2 file-system-cache: 1.0.5 find-up: 5.0.0 - fork-ts-checker-webpack-plugin: 6.5.0_eslint@7.28.0+webpack@4.46.0 + fork-ts-checker-webpack-plugin: 6.5.0_ce01ad3ba1d020f8a4eca15d0188e5bb fs-extra: 9.1.0 glob: 7.2.0 handlebars: 4.7.7 @@ -5131,6 +5144,7 @@ packages: slash: 3.0.0 telejson: 5.3.3 ts-dedent: 2.2.0 + typescript: 4.6.2 util-deprecate: 1.0.2 webpack: 4.46.0 transitivePeerDependencies: @@ -5141,7 +5155,7 @@ packages: - webpack-command dev: true - /@storybook/core-common/6.4.19_20a16e7548cf3623e0d86e2848596cc6: + /@storybook/core-common/6.4.19_7706808a552eb6e46287b90885c9e482: resolution: {integrity: sha512-X1pJJkO48DFxl6iyEemIKqRkJ7j9/cBh3BRBUr+xZHXBvnD0GKDXIocwh0PjSxSC6XSu3UCQnqtKi3PbjRl8Dg==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -5184,7 +5198,7 @@ packages: express: 4.17.2 file-system-cache: 1.0.5 find-up: 5.0.0 - fork-ts-checker-webpack-plugin: 6.5.0_eslint@7.28.0+webpack@4.46.0 + fork-ts-checker-webpack-plugin: 6.5.0_ce01ad3ba1d020f8a4eca15d0188e5bb fs-extra: 9.1.0 glob: 7.2.0 handlebars: 4.7.7 @@ -5200,6 +5214,7 @@ packages: slash: 3.0.0 telejson: 5.3.3 ts-dedent: 2.2.0 + typescript: 4.6.2 util-deprecate: 1.0.2 webpack: 4.46.0 transitivePeerDependencies: @@ -5222,7 +5237,7 @@ packages: core-js: 3.20.2 dev: true - /@storybook/core-server/6.4.13_acorn@7.4.1+eslint@7.28.0: + /@storybook/core-server/6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e: resolution: {integrity: sha512-i3zrtHHkV6/b+jJF65BQu+YuXen+T/MF1f5J+li5nvJnLKhssVQmvpGvWyJezT3OgFkC1+BFBokFY6NXHHw77g==} peerDependencies: '@storybook/builder-webpack5': 6.4.13 @@ -5239,13 +5254,13 @@ packages: optional: true dependencies: '@discoveryjs/json-ext': 0.5.6 - '@storybook/builder-webpack4': 6.4.13_acorn@7.4.1+eslint@7.28.0 - '@storybook/core-client': 6.4.13_webpack@4.46.0 - '@storybook/core-common': 6.4.13_eslint@7.28.0 + '@storybook/builder-webpack4': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e + '@storybook/core-client': 6.4.13_typescript@4.6.2+webpack@4.46.0 + '@storybook/core-common': 6.4.13_eslint@7.28.0+typescript@4.6.2 '@storybook/core-events': 6.4.13 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/csf-tools': 6.4.13 - '@storybook/manager-webpack4': 6.4.13_acorn@7.4.1+eslint@7.28.0 + '@storybook/manager-webpack4': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e '@storybook/node-logger': 6.4.13 '@storybook/semver': 7.3.2 '@storybook/store': 6.4.13 @@ -5276,6 +5291,7 @@ packages: slash: 3.0.0 telejson: 5.3.3 ts-dedent: 2.2.0 + typescript: 4.6.2 util-deprecate: 1.0.2 watchpack: 2.3.1 webpack: 4.46.0 @@ -5292,7 +5308,7 @@ packages: - webpack-command dev: true - /@storybook/core-server/6.4.19_20a16e7548cf3623e0d86e2848596cc6: + /@storybook/core-server/6.4.19_7706808a552eb6e46287b90885c9e482: resolution: {integrity: sha512-bKsUB9f7hl5ya2JXxpIrErmbDQjoH39FVbzYZWjMo4t/b7+Xyi6vYadwyWcqlpUQmis09ZaSMv8L/Tw0TuwLAA==} peerDependencies: '@storybook/builder-webpack5': 6.4.19 @@ -5309,13 +5325,13 @@ packages: optional: true dependencies: '@discoveryjs/json-ext': 0.5.6 - '@storybook/builder-webpack4': 6.4.19_20a16e7548cf3623e0d86e2848596cc6 - '@storybook/core-client': 6.4.19_e97e5e3809294a3414549b4ba42cd203 - '@storybook/core-common': 6.4.19_20a16e7548cf3623e0d86e2848596cc6 + '@storybook/builder-webpack4': 6.4.19_7706808a552eb6e46287b90885c9e482 + '@storybook/core-client': 6.4.19_1e23a0fa29879f8bdd5a0b4c23f44c1d + '@storybook/core-common': 6.4.19_7706808a552eb6e46287b90885c9e482 '@storybook/core-events': 6.4.19 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/csf-tools': 6.4.19 - '@storybook/manager-webpack4': 6.4.19_20a16e7548cf3623e0d86e2848596cc6 + '@storybook/manager-webpack4': 6.4.19_7706808a552eb6e46287b90885c9e482 '@storybook/node-logger': 6.4.19 '@storybook/semver': 7.3.2 '@storybook/store': 6.4.19_react-dom@16.14.0+react@16.14.0 @@ -5348,6 +5364,7 @@ packages: slash: 3.0.0 telejson: 5.3.3 ts-dedent: 2.2.0 + typescript: 4.6.2 util-deprecate: 1.0.2 watchpack: 2.3.1 webpack: 4.46.0 @@ -5365,7 +5382,7 @@ packages: - webpack-command dev: true - /@storybook/core/6.4.13_acorn@7.4.1+eslint@7.28.0: + /@storybook/core/6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e: resolution: {integrity: sha512-OSbji5w4jrGNALbxJwktZhi8qw4bGgL88dL72O40173b8ROLBOGkEkkz/BpHbqx2PhS9sGVNVMK2b2BwAiiu7g==} peerDependencies: '@storybook/builder-webpack5': 6.4.13 @@ -5379,8 +5396,9 @@ packages: typescript: optional: true dependencies: - '@storybook/core-client': 6.4.13 - '@storybook/core-server': 6.4.13_acorn@7.4.1+eslint@7.28.0 + '@storybook/core-client': 6.4.13_typescript@4.6.2 + '@storybook/core-server': 6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e + typescript: 4.6.2 transitivePeerDependencies: - '@storybook/manager-webpack5' - '@types/react' @@ -5394,7 +5412,7 @@ packages: - webpack-command dev: true - /@storybook/core/6.4.19_15772a01d48845ebbb7adcd06a027d90: + /@storybook/core/6.4.19_de89715138f42fc7435f35df74df0621: resolution: {integrity: sha512-55LOQ/h/kf1jMhjN85t/pIEdIwWEG9yV7bdwv3niVvmoypCxyyjn9/QNK0RKYAeDSUtdm6FVoJ6k5CpxWz2d8w==} peerDependencies: '@storybook/builder-webpack5': 6.4.19 @@ -5408,10 +5426,11 @@ packages: typescript: optional: true dependencies: - '@storybook/core-client': 6.4.19_e97e5e3809294a3414549b4ba42cd203 - '@storybook/core-server': 6.4.19_20a16e7548cf3623e0d86e2848596cc6 + '@storybook/core-client': 6.4.19_1e23a0fa29879f8bdd5a0b4c23f44c1d + '@storybook/core-server': 6.4.19_7706808a552eb6e46287b90885c9e482 react: 16.14.0 react-dom: 16.14.0_react@16.14.0 + typescript: 4.6.2 webpack: 4.46.0 transitivePeerDependencies: - '@storybook/manager-webpack5' @@ -5481,7 +5500,7 @@ packages: lodash: 4.17.21 dev: true - /@storybook/manager-webpack4/6.4.13_acorn@7.4.1+eslint@7.28.0: + /@storybook/manager-webpack4/6.4.13_eb2b75b8e9ca83d5da3be78da5a3c96e: resolution: {integrity: sha512-aUUIvSf1nUSuPEdLFcbXbEbm+WlBrpX+Ce+Ee5zuMpggfiMeq4H4UB5QuluB8oLUcJA/ZoQZ9m4pPfUZDH0O0w==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -5495,8 +5514,8 @@ packages: '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.16.7 '@babel/preset-react': 7.16.7_@babel+core@7.16.7 '@storybook/addons': 6.4.13 - '@storybook/core-client': 6.4.13_webpack@4.46.0 - '@storybook/core-common': 6.4.13_eslint@7.28.0 + '@storybook/core-client': 6.4.13_typescript@4.6.2+webpack@4.46.0 + '@storybook/core-common': 6.4.13_eslint@7.28.0+typescript@4.6.2 '@storybook/node-logger': 6.4.13 '@storybook/theming': 6.4.13 '@storybook/ui': 6.4.13 @@ -5514,7 +5533,7 @@ packages: fs-extra: 9.1.0 html-webpack-plugin: 4.5.2_webpack@4.46.0 node-fetch: 2.6.6 - pnp-webpack-plugin: 1.6.4 + pnp-webpack-plugin: 1.6.4_typescript@4.6.2 read-pkg-up: 7.0.1 regenerator-runtime: 0.13.9 resolve-from: 5.0.0 @@ -5522,6 +5541,7 @@ packages: telejson: 5.3.3 terser-webpack-plugin: 4.2.3_acorn@7.4.1+webpack@4.46.0 ts-dedent: 2.2.0 + typescript: 4.6.2 url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 util-deprecate: 1.0.2 webpack: 4.46.0 @@ -5537,7 +5557,7 @@ packages: - webpack-command dev: true - /@storybook/manager-webpack4/6.4.19_20a16e7548cf3623e0d86e2848596cc6: + /@storybook/manager-webpack4/6.4.19_7706808a552eb6e46287b90885c9e482: resolution: {integrity: sha512-R8ugZjTYqXvlc6gDOcw909L65sIleOmIJLZR+N6/H85MivGXHu39jOwONqB7tVACufRty4FNecn8tEiQL2SAKA==} peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -5551,8 +5571,8 @@ packages: '@babel/plugin-transform-template-literals': 7.16.7_@babel+core@7.16.7 '@babel/preset-react': 7.16.7_@babel+core@7.16.7 '@storybook/addons': 6.4.19_react-dom@16.14.0+react@16.14.0 - '@storybook/core-client': 6.4.19_e97e5e3809294a3414549b4ba42cd203 - '@storybook/core-common': 6.4.19_20a16e7548cf3623e0d86e2848596cc6 + '@storybook/core-client': 6.4.19_1e23a0fa29879f8bdd5a0b4c23f44c1d + '@storybook/core-common': 6.4.19_7706808a552eb6e46287b90885c9e482 '@storybook/node-logger': 6.4.19 '@storybook/theming': 6.4.19_react-dom@16.14.0+react@16.14.0 '@storybook/ui': 6.4.19_react-dom@16.14.0+react@16.14.0 @@ -5570,7 +5590,7 @@ packages: fs-extra: 9.1.0 html-webpack-plugin: 4.5.2_webpack@4.46.0 node-fetch: 2.6.7 - pnp-webpack-plugin: 1.6.4 + pnp-webpack-plugin: 1.6.4_typescript@4.6.2 react: 16.14.0 react-dom: 16.14.0_react@16.14.0 read-pkg-up: 7.0.1 @@ -5580,6 +5600,7 @@ packages: telejson: 5.3.3 terser-webpack-plugin: 4.2.3_webpack@4.46.0 ts-dedent: 2.2.0 + typescript: 4.6.2 url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0 util-deprecate: 1.0.2 webpack: 4.46.0 @@ -5907,7 +5928,7 @@ packages: - '@types/react' dev: true - /@storybook/vue3/6.4.19_9acdbe7dd6547c318b6d3fe71f0ccc31: + /@storybook/vue3/6.4.19_6fabd474ce48a9cba2517de27444e050: resolution: {integrity: sha512-ocW2haoDOXudK3XHC7raBjq9k9gPsApiyQc4dPnjcF8sXmC3WZg6CYSPt0o00UMDmeDL0MDW336fw94jy6+LfA==} engines: {node: '>=10.13.0'} hasBin: true @@ -5919,8 +5940,8 @@ packages: dependencies: '@babel/core': 7.16.5 '@storybook/addons': 6.4.19_react-dom@16.14.0+react@16.14.0 - '@storybook/core': 6.4.19_15772a01d48845ebbb7adcd06a027d90 - '@storybook/core-common': 6.4.19_20a16e7548cf3623e0d86e2848596cc6 + '@storybook/core': 6.4.19_de89715138f42fc7435f35df74df0621 + '@storybook/core-common': 6.4.19_7706808a552eb6e46287b90885c9e482 '@storybook/csf': 0.0.2--canary.87bc651.0 '@storybook/store': 6.4.19_react-dom@16.14.0+react@16.14.0 '@types/webpack-env': 1.16.3 @@ -5932,7 +5953,7 @@ packages: read-pkg-up: 7.0.1 regenerator-runtime: 0.13.9 ts-dedent: 2.2.0 - ts-loader: 8.3.0_webpack@4.46.0 + ts-loader: 8.3.0_typescript@4.6.2+webpack@4.46.0 vue: 3.2.31 vue-docgen-api: 4.43.2 vue-docgen-loader: 1.5.0_12c18269368d208f5c2d57decefa0697 @@ -6121,6 +6142,11 @@ packages: dev: true optional: true + /@tsd/typescript/4.5.5: + resolution: {integrity: sha512-TxQ9QiUT94ZjKu++ta/iwTMVHsix4ApohnaHPTSd58WQuTjPIELP0tUYcW7lT6psz7yZiU4eRw+X4v/XV830Sw==} + hasBin: true + dev: true + /@types/babel__core/7.1.17: resolution: {integrity: sha512-6zzkezS9QEIL8yCBvXWxPTJPNuMeECJVxSOhxNY/jfq9LxOTHivaYTqr37n9LknWWRTIkzqH2UilS5QFvfa90A==} dependencies: @@ -6167,6 +6193,13 @@ packages: '@types/estree': 0.0.51 dev: true + /@types/eslint/7.29.0: + resolution: {integrity: sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==} + dependencies: + '@types/estree': 0.0.51 + '@types/json-schema': 7.0.9 + dev: true + /@types/eslint/8.4.1: resolution: {integrity: sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==} dependencies: @@ -6225,6 +6258,13 @@ packages: '@types/istanbul-lib-report': 3.0.0 dev: true + /@types/jest/27.4.1: + resolution: {integrity: sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==} + dependencies: + jest-matcher-utils: 27.4.2 + pretty-format: 27.4.2 + dev: true + /@types/json-schema/7.0.9: resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==} dev: true @@ -6404,6 +6444,132 @@ packages: dev: true optional: true + /@typescript-eslint/eslint-plugin/5.14.0_a51fe434674359365e7e6c67e2dd8843: + resolution: {integrity: sha512-ir0wYI4FfFUDfLcuwKzIH7sMVA+db7WYen47iRSaCGl+HMAZI9fpBwfDo45ZALD3A45ZGyHWDNLhbg8tZrMX4w==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + '@typescript-eslint/parser': ^5.0.0 + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/parser': 5.14.0_eslint@7.28.0+typescript@4.6.2 + '@typescript-eslint/scope-manager': 5.14.0 + '@typescript-eslint/type-utils': 5.14.0_eslint@7.28.0+typescript@4.6.2 + '@typescript-eslint/utils': 5.14.0_eslint@7.28.0+typescript@4.6.2 + debug: 4.3.3 + eslint: 7.28.0 + functional-red-black-tree: 1.0.1 + ignore: 5.2.0 + regexpp: 3.2.0 + semver: 7.3.5 + tsutils: 3.21.0_typescript@4.6.2 + typescript: 4.6.2 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/parser/5.14.0_eslint@7.28.0+typescript@4.6.2: + resolution: {integrity: sha512-aHJN8/FuIy1Zvqk4U/gcO/fxeMKyoSv/rS46UXMXOJKVsLQ+iYPuXNbpbH7cBLcpSbmyyFbwrniLx5+kutu1pw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/scope-manager': 5.14.0 + '@typescript-eslint/types': 5.14.0 + '@typescript-eslint/typescript-estree': 5.14.0_typescript@4.6.2 + debug: 4.3.3 + eslint: 7.28.0 + typescript: 4.6.2 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/scope-manager/5.14.0: + resolution: {integrity: sha512-LazdcMlGnv+xUc5R4qIlqH0OWARyl2kaP8pVCS39qSL3Pd1F7mI10DbdXeARcE62sVQE4fHNvEqMWsypWO+yEw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + '@typescript-eslint/types': 5.14.0 + '@typescript-eslint/visitor-keys': 5.14.0 + dev: true + + /@typescript-eslint/type-utils/5.14.0_eslint@7.28.0+typescript@4.6.2: + resolution: {integrity: sha512-d4PTJxsqaUpv8iERTDSQBKUCV7Q5yyXjqXUl3XF7Sd9ogNLuKLkxz82qxokqQ4jXdTPZudWpmNtr/JjbbvUixw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: '*' + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/utils': 5.14.0_eslint@7.28.0+typescript@4.6.2 + debug: 4.3.3 + eslint: 7.28.0 + tsutils: 3.21.0_typescript@4.6.2 + typescript: 4.6.2 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/types/5.14.0: + resolution: {integrity: sha512-BR6Y9eE9360LNnW3eEUqAg6HxS9Q35kSIs4rp4vNHRdfg0s+/PgHgskvu5DFTM7G5VKAVjuyaN476LCPrdA7Mw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dev: true + + /@typescript-eslint/typescript-estree/5.14.0_typescript@4.6.2: + resolution: {integrity: sha512-QGnxvROrCVtLQ1724GLTHBTR0lZVu13izOp9njRvMkCBgWX26PKvmMP8k82nmXBRD3DQcFFq2oj3cKDwr0FaUA==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/types': 5.14.0 + '@typescript-eslint/visitor-keys': 5.14.0 + debug: 4.3.3 + globby: 11.1.0 + is-glob: 4.0.3 + semver: 7.3.5 + tsutils: 3.21.0_typescript@4.6.2 + typescript: 4.6.2 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/utils/5.14.0_eslint@7.28.0+typescript@4.6.2: + resolution: {integrity: sha512-EHwlII5mvUA0UsKYnVzySb/5EE/t03duUTweVy8Zqt3UQXBrpEVY144OTceFKaOe4xQXZJrkptCf7PjEBeGK4w==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + dependencies: + '@types/json-schema': 7.0.9 + '@typescript-eslint/scope-manager': 5.14.0 + '@typescript-eslint/types': 5.14.0 + '@typescript-eslint/typescript-estree': 5.14.0_typescript@4.6.2 + eslint: 7.28.0 + eslint-scope: 5.1.1 + eslint-utils: 3.0.0_eslint@7.28.0 + transitivePeerDependencies: + - supports-color + - typescript + dev: true + + /@typescript-eslint/visitor-keys/5.14.0: + resolution: {integrity: sha512-yL0XxfzR94UEkjBqyymMLgCBdojzEuy/eim7N9/RIcTNxpJudAcqsU8eRyfzBbcEzGoPWfdM3AGak3cN08WOIw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + dependencies: + '@typescript-eslint/types': 5.14.0 + eslint-visitor-keys: 3.1.0 + dev: true + /@vitejs/plugin-vue/2.2.2_vite@2.8.6+vue@3.2.31: resolution: {integrity: sha512-3C0s45VOwIFEDU+2ownJOpb0zD5fnjXWaHVOLID2R1mYOlAx3doNBFnNbVjaZvpke/L7IdPJXjpyYpXZToDKig==} engines: {node: '>=12.0.0'} @@ -6499,6 +6665,23 @@ packages: prettier: 2.5.1 dev: true + /@vue/eslint-config-typescript/10.0.0_3991ff270b21162cb7043e22198f90cc: + resolution: {integrity: sha512-F94cL8ug3FaYXlCfU5/wiGjk1qeadmoBpRGAOBq+qre3Smdupa59dd6ZJrsfRODpsMPyTG7330juMDsUvpZ3Rw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 + eslint-plugin-vue: ^8.0.1 + dependencies: + '@typescript-eslint/eslint-plugin': 5.14.0_a51fe434674359365e7e6c67e2dd8843 + '@typescript-eslint/parser': 5.14.0_eslint@7.28.0+typescript@4.6.2 + eslint: 7.28.0 + eslint-plugin-vue: 8.2.0_eslint@7.28.0 + vue-eslint-parser: 8.0.1_eslint@7.28.0 + transitivePeerDependencies: + - supports-color + - typescript + dev: true + /@vue/reactivity-transform/3.2.31: resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==} dependencies: @@ -6556,7 +6739,7 @@ packages: vue: 3.2.31 dev: true - /@vue/vue3-jest/27.0.0-alpha.4_086e071c456560e3f52577ca51f14fd3: + /@vue/vue3-jest/27.0.0-alpha.4_4e1ea214410aa521ed12ff5681f807c8: resolution: {integrity: sha512-RgEwjNvwdWmRngHqgt957fLT6riOkv/Kyl0ra8jo0Z8Dgosmu17dNqgBzLn9fTgNlTbHv4TQQdLRjczr+z2mlA==} peerDependencies: '@babel/core': 7.x @@ -6580,6 +6763,7 @@ packages: jest: 27.4.4 source-map: 0.5.6 tsconfig: 7.0.0 + typescript: 4.6.2 vue: 3.2.31 transitivePeerDependencies: - supports-color @@ -9258,7 +9442,7 @@ packages: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} dev: true - /cosmiconfig-typescript-loader/1.0.5_85b573b50bd3c98a25ceb530199c078f: + /cosmiconfig-typescript-loader/1.0.5_b277d3279beba5662cbe91a0867ec5fc: resolution: {integrity: sha512-FL/YR1nb8hyN0bAcP3MBaIoZravfZtVsN/RuPnoo6UVjqIrDxSNIpXHCGgJe0ZWy5yImpyD6jq5wCJ5f1nUv8g==} engines: {node: '>=12', npm: '>=6'} peerDependencies: @@ -9267,8 +9451,8 @@ packages: dependencies: '@types/node': 17.0.18 cosmiconfig: 7.0.1 - ts-node: 10.5.0_85b573b50bd3c98a25ceb530199c078f - typescript: 4.5.3 + ts-node: 10.5.0_b277d3279beba5662cbe91a0867ec5fc + typescript: 4.6.2 transitivePeerDependencies: - '@swc/core' - '@swc/wasm' @@ -10609,6 +10793,20 @@ packages: eslint-plugin-promise: 6.0.0_eslint@7.28.0 dev: true + /eslint-formatter-pretty/4.1.0: + resolution: {integrity: sha512-IsUTtGxF1hrH6lMWiSl1WbGaiP01eT6kzywdY1U+zLc0MP+nwEnUiS9UI8IaOTUhTeQJLlCEWIbXINBH4YJbBQ==} + engines: {node: '>=10'} + dependencies: + '@types/eslint': 7.29.0 + ansi-escapes: 4.3.2 + chalk: 4.1.2 + eslint-rule-docs: 1.1.231 + log-symbols: 4.1.0 + plur: 4.0.0 + string-width: 4.2.3 + supports-hyperlinks: 2.2.0 + dev: true + /eslint-import-resolver-node/0.3.6: resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==} dependencies: @@ -10738,6 +10936,10 @@ packages: - supports-color dev: true + /eslint-rule-docs/1.1.231: + resolution: {integrity: sha512-egHz9A1WG7b8CS0x1P6P/Rj5FqZOjray/VjpJa14tMZalfRKvpE2ONJ3plCM7+PcinmU4tcmbPLv0VtwzSdLVA==} + dev: true + /eslint-scope/4.0.3: resolution: {integrity: sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==} engines: {node: '>=4.0.0'} @@ -11504,7 +11706,7 @@ packages: worker-rpc: 0.1.1 dev: true - /fork-ts-checker-webpack-plugin/6.5.0_eslint@7.28.0+webpack@4.46.0: + /fork-ts-checker-webpack-plugin/6.5.0_ce01ad3ba1d020f8a4eca15d0188e5bb: resolution: {integrity: sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==} engines: {node: '>=10', yarn: '>=1.0.0'} peerDependencies: @@ -11532,6 +11734,7 @@ packages: schema-utils: 2.7.0 semver: 7.3.5 tapable: 1.1.3 + typescript: 4.6.2 webpack: 4.46.0 dev: true @@ -12690,6 +12893,11 @@ packages: engines: {node: '>= 0.10'} dev: true + /irregular-plurals/3.3.0: + resolution: {integrity: sha512-MVBLKUTangM3EfRPFROhmWQQKRDsrgI83J8GS3jXy+OwYqiR2/aoWndYQ5416jLE3uaGgLH7ncme3X9y09gZ3g==} + engines: {node: '>=8'} + dev: true + /is-absolute-url/2.1.0: resolution: {integrity: sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=} engines: {node: '>=0.10.0'} @@ -13164,6 +13372,11 @@ packages: resolution: {integrity: sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=} dev: true + /is-unicode-supported/0.1.0: + resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==} + engines: {node: '>=10'} + dev: true + /is-utf8/0.2.1: resolution: {integrity: sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=} dev: true @@ -14490,6 +14703,14 @@ packages: chalk: 2.4.2 dev: true + /log-symbols/4.1.0: + resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==} + engines: {node: '>=10'} + dependencies: + chalk: 4.1.2 + is-unicode-supported: 0.1.0 + dev: true + /log-update/2.3.0: resolution: {integrity: sha1-iDKP19HOeTiykoN0bwsbwSayRwg=} engines: {node: '>=4'} @@ -14832,6 +15053,24 @@ packages: yargs-parser: 20.2.9 dev: true + /meow/9.0.0: + resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==} + engines: {node: '>=10'} + dependencies: + '@types/minimist': 1.2.2 + camelcase-keys: 6.2.2 + decamelize: 1.2.0 + decamelize-keys: 1.1.0 + hard-rejection: 2.1.0 + minimist-options: 4.1.0 + normalize-package-data: 3.0.3 + read-pkg-up: 7.0.1 + redent: 3.0.0 + trim-newlines: 3.0.1 + type-fest: 0.18.1 + yargs-parser: 20.2.9 + dev: true + /merge-descriptors/1.0.1: resolution: {integrity: sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=} dev: true @@ -15992,11 +16231,18 @@ packages: find-up: 5.0.0 dev: true - /pnp-webpack-plugin/1.6.4: + /plur/4.0.0: + resolution: {integrity: sha512-4UGewrYgqDFw9vV6zNV+ADmPAUAfJPKtGvb/VdpQAx25X5f3xXdGdyOEVFwkl8Hl/tl7+xbeHqSEM+D5/TirUg==} + engines: {node: '>=10'} + dependencies: + irregular-plurals: 3.3.0 + dev: true + + /pnp-webpack-plugin/1.6.4_typescript@4.6.2: resolution: {integrity: sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==} engines: {node: '>=6'} dependencies: - ts-pnp: 1.2.0 + ts-pnp: 1.2.0_typescript@4.6.2 transitivePeerDependencies: - typescript dev: true @@ -19156,7 +19402,7 @@ packages: engines: {node: '>=6.10'} dev: true - /ts-loader/8.3.0_webpack@4.46.0: + /ts-loader/8.3.0_typescript@4.6.2+webpack@4.46.0: resolution: {integrity: sha512-MgGly4I6cStsJy27ViE32UoqxPTN9Xly4anxxVyaIWR+9BGxboV4EyJBGfR3RePV7Ksjj3rHmPZJeIt+7o4Vag==} engines: {node: '>=10.0.0'} peerDependencies: @@ -19168,6 +19414,7 @@ packages: loader-utils: 2.0.2 micromatch: 4.0.4 semver: 7.3.5 + typescript: 4.6.2 webpack: 4.46.0 dev: true @@ -19175,7 +19422,7 @@ packages: resolution: {integrity: sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==} dev: true - /ts-node/10.5.0_85b573b50bd3c98a25ceb530199c078f: + /ts-node/10.5.0_b277d3279beba5662cbe91a0867ec5fc: resolution: {integrity: sha512-6kEJKwVxAJ35W4akuiysfKwKmjkbYxwQMTBaAxo9KKAx/Yd26mPUyhGz3ji+EsJoAgrLqVsYHNuuYwQe22lbtw==} hasBin: true peerDependencies: @@ -19202,13 +19449,13 @@ packages: create-require: 1.1.1 diff: 4.0.2 make-error: 1.3.6 - typescript: 4.5.3 + typescript: 4.6.2 v8-compile-cache-lib: 3.0.0 yn: 3.1.1 dev: true optional: true - /ts-node/9.1.1_typescript@4.5.3: + /ts-node/9.1.1_typescript@4.6.2: resolution: {integrity: sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg==} engines: {node: '>=10.0.0'} hasBin: true @@ -19220,11 +19467,11 @@ packages: diff: 4.0.2 make-error: 1.3.6 source-map-support: 0.5.21 - typescript: 4.5.3 + typescript: 4.6.2 yn: 3.1.1 dev: true - /ts-pnp/1.2.0: + /ts-pnp/1.2.0_typescript@4.6.2: resolution: {integrity: sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==} engines: {node: '>=6'} peerDependencies: @@ -19232,6 +19479,8 @@ packages: peerDependenciesMeta: typescript: optional: true + dependencies: + typescript: 4.6.2 dev: true /tsconfig-paths/3.12.0: @@ -19252,6 +19501,19 @@ packages: strip-json-comments: 2.0.1 dev: true + /tsd/0.19.1: + resolution: {integrity: sha512-pSwchclr+ADdxlahRUQXUrdAIOjXx1T1PQV+fLfVLuo/S4z+T00YU84fH8iPlZxyA2pWgJjo42BG1p9SDb4NOw==} + engines: {node: '>=12'} + hasBin: true + dependencies: + '@tsd/typescript': 4.5.5 + eslint-formatter-pretty: 4.1.0 + globby: 11.1.0 + meow: 9.0.0 + path-exists: 4.0.0 + read-pkg-up: 7.0.1 + dev: true + /tslib/1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} dev: true @@ -19269,6 +19531,16 @@ packages: engines: {node: '>=0.6.x'} dev: true + /tsutils/3.21.0_typescript@4.6.2: + resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} + engines: {node: '>= 6'} + peerDependencies: + typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' + dependencies: + tslib: 1.14.1 + typescript: 4.6.2 + dev: true + /tty-browserify/0.0.0: resolution: {integrity: sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=} dev: true @@ -19358,8 +19630,8 @@ packages: resolution: {integrity: sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=} dev: true - /typescript/4.5.3: - resolution: {integrity: sha512-eVYaEHALSt+s9LbvgEv4Ef+Tdq7hBiIZgii12xXJnukryt3pMgJf6aKhoCZ3FWQsu6sydEnkg11fYXLzhLBjeQ==} + /typescript/4.6.2: + resolution: {integrity: sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==} engines: {node: '>=4.2.0'} hasBin: true dev: true diff --git a/sandboxes/bar/package.json b/sandboxes/bar/package.json index ec0db9b6..137fc066 100644 --- a/sandboxes/bar/package.json +++ b/sandboxes/bar/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-bar-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/bar/src/App.vue b/sandboxes/bar/src/App.vue index 23596951..c5e1c6a4 100644 --- a/sandboxes/bar/src/App.vue +++ b/sandboxes/bar/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/bubble/package.json b/sandboxes/bubble/package.json index 191e2648..9d619a33 100644 --- a/sandboxes/bubble/package.json +++ b/sandboxes/bubble/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-bubble-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/bubble/src/App.vue b/sandboxes/bubble/src/App.vue index ad3954bd..613af078 100644 --- a/sandboxes/bubble/src/App.vue +++ b/sandboxes/bubble/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/custom/package.json b/sandboxes/custom/package.json index ffc20c78..5dbdaa14 100644 --- a/sandboxes/custom/package.json +++ b/sandboxes/custom/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-custom-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/custom/src/App.vue b/sandboxes/custom/src/App.vue index b78d4394..89ecd81d 100644 --- a/sandboxes/custom/src/App.vue +++ b/sandboxes/custom/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/doughnut/package.json b/sandboxes/doughnut/package.json index 61272420..1645265d 100644 --- a/sandboxes/doughnut/package.json +++ b/sandboxes/doughnut/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-doughnut-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/doughnut/src/App.vue b/sandboxes/doughnut/src/App.vue index e28234f7..a22818c9 100644 --- a/sandboxes/doughnut/src/App.vue +++ b/sandboxes/doughnut/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/line/package.json b/sandboxes/line/package.json index bfee27c6..590b5430 100644 --- a/sandboxes/line/package.json +++ b/sandboxes/line/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-line-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/line/src/App.vue b/sandboxes/line/src/App.vue index c13478e1..48ab90a5 100644 --- a/sandboxes/line/src/App.vue +++ b/sandboxes/line/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/pie/package.json b/sandboxes/pie/package.json index 0d5c65ad..64704e23 100644 --- a/sandboxes/pie/package.json +++ b/sandboxes/pie/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-pie-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/pie/src/App.vue b/sandboxes/pie/src/App.vue index 569b7537..4f1f41d7 100644 --- a/sandboxes/pie/src/App.vue +++ b/sandboxes/pie/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/polar-area/package.json b/sandboxes/polar-area/package.json index 9480a163..27e9be61 100644 --- a/sandboxes/polar-area/package.json +++ b/sandboxes/polar-area/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-polar-area-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/polar-area/src/App.vue b/sandboxes/polar-area/src/App.vue index 741f462f..20e417f9 100644 --- a/sandboxes/polar-area/src/App.vue +++ b/sandboxes/polar-area/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/radar/package.json b/sandboxes/radar/package.json index 5ca7bbc4..2a860dd6 100644 --- a/sandboxes/radar/package.json +++ b/sandboxes/radar/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-radar-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/radar/src/App.vue b/sandboxes/radar/src/App.vue index 0aba77dc..a5a2f7e9 100644 --- a/sandboxes/radar/src/App.vue +++ b/sandboxes/radar/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/reactive-prop/package.json b/sandboxes/reactive-prop/package.json index b2d69118..8d03b9ad 100644 --- a/sandboxes/reactive-prop/package.json +++ b/sandboxes/reactive-prop/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-reactive-prop-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/reactive-prop/src/App.vue b/sandboxes/reactive-prop/src/App.vue index 67735da4..14ebe0ab 100644 --- a/sandboxes/reactive-prop/src/App.vue +++ b/sandboxes/reactive-prop/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/reactive-prop/src/components/reactivePropPage.vue b/sandboxes/reactive-prop/src/components/reactivePropPage.ts similarity index 91% rename from sandboxes/reactive-prop/src/components/reactivePropPage.vue rename to sandboxes/reactive-prop/src/components/reactivePropPage.ts index a8fb836c..715ab7d6 100644 --- a/sandboxes/reactive-prop/src/components/reactivePropPage.vue +++ b/sandboxes/reactive-prop/src/components/reactivePropPage.ts @@ -1,5 +1,4 @@ - diff --git a/sandboxes/reactive/package.json b/sandboxes/reactive/package.json index 52d18672..938d8426 100644 --- a/sandboxes/reactive/package.json +++ b/sandboxes/reactive/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-reactive-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/reactive/src/App.vue b/sandboxes/reactive/src/App.vue index 35500115..314c4961 100644 --- a/sandboxes/reactive/src/App.vue +++ b/sandboxes/reactive/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/scatter/package.json b/sandboxes/scatter/package.json index 6e362ffd..409c78b8 100644 --- a/sandboxes/scatter/package.json +++ b/sandboxes/scatter/package.json @@ -1,8 +1,9 @@ { "name": "vue-chartjs-scatter-example", "dependencies": { - "vue": "^2.6.11", + "vue": "^3.2.31", "chart.js": "3.7.0", - "vue-chartjs": "3.5.1" + "vue-chartjs": "3.5.1", + "typescript": "^4.6.2" } } diff --git a/sandboxes/scatter/src/App.vue b/sandboxes/scatter/src/App.vue index 6f41d1fb..db06b9f2 100644 --- a/sandboxes/scatter/src/App.vue +++ b/sandboxes/scatter/src/App.vue @@ -3,7 +3,7 @@ diff --git a/sandboxes/tsconfig.json b/sandboxes/tsconfig.json new file mode 100644 index 00000000..dabfe46e --- /dev/null +++ b/sandboxes/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "vue-chartjs": ["../src"] + } + }, + "include": ["."] +} diff --git a/src/BaseCharts.js b/src/BaseCharts.ts similarity index 51% rename from src/BaseCharts.js rename to src/BaseCharts.ts index fc7f82ce..69d71cfd 100644 --- a/src/BaseCharts.js +++ b/src/BaseCharts.ts @@ -10,16 +10,25 @@ import { ScatterController } from 'chart.js' +import type { + ChartType, + ChartComponentLike, + DefaultDataPoint, + PluginOptionsByType, + ChartOptions +} from 'chart.js' + import { defineComponent, ref, + shallowRef, h, onMounted, onBeforeUnmount, watch, - computed, isProxy, - toRaw + toRaw, + PropType } from 'vue' import { @@ -29,27 +38,40 @@ import { getChartOptions, getChartData, setChartLabels, - setChartXLabels, - setChartYLabels, setChartDatasets, compareData -} from './utils.js' - -export const generateChart = (chartId, chartType, chartController) => +} from './utils' + +import type { + TChartData, + TChartOptions, + TypedChartJS, + TypedChartComponent +} from './types' + +export const generateChart = < + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +>( + chartId: string, + chartType: TType, + chartController: ChartComponentLike +): TypedChartComponent => defineComponent({ props: { chartData: { - type: Object, + type: Object as PropType>, required: true }, + chartOptions: { + type: Object as PropType>, + default: () => {} + }, datasetIdKey: { type: String, default: 'label' }, - chartOptions: { - type: Object, - default: () => {} - }, chartId: { type: String, default: chartId @@ -67,87 +89,106 @@ export const generateChart = (chartId, chartType, chartController) => default: '' }, styles: { - type: Object, + type: Object as PropType>, default: () => {} }, plugins: { - type: Object, + type: Object as PropType>, default: () => {} } }, setup(props, context) { ChartJS.register(chartController) - const _chart = ref(null) - const canvasEl = ref(null) + const _chart = shallowRef | null>(null) + const canvasEl = ref(null) - const hasChart = computed(() => _chart.value !== null) - - function renderChart(data, options) { - if (hasChart.value) { - chartDestroy(toRaw(_chart.value), context) + function renderChart( + data: TChartData, + options: TChartOptions + ): void { + if (_chart.value !== null) { + chartDestroy(toRaw(_chart.value), context) } if (canvasEl.value === null) { throw new Error( 'Please remove the tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components' ) + } else { + const chartData = getChartData( + data, + props.datasetIdKey + ) + const canvasEl2DContext = canvasEl.value.getContext('2d') + + if (canvasEl2DContext !== null) { + _chart.value = new ChartJS( + canvasEl2DContext, + { + type: chartType, + data: isProxy(data) ? new Proxy(chartData, {}) : chartData, + options: getChartOptions(options, props.plugins) + } + ) + } } - - const chartData = getChartData(data) - - _chart.value = new ChartJS(canvasEl.value.getContext('2d'), { - type: chartType, - data: isProxy(data) ? new Proxy(chartData, {}) : chartData, - options: getChartOptions(options, props.plugins) - }) } - function chartDataHandler(newValue, oldValue) { + function chartDataHandler( + newValue: TChartData, + oldValue: TChartData + ): void { const newData = isProxy(newValue) ? toRaw(newValue) : { ...newValue } const oldData = isProxy(oldValue) ? toRaw(oldValue) : { ...oldValue } if (Object.keys(oldData).length > 0) { const chart = toRaw(_chart.value) - const isEqualLabelsAndDatasetsLength = compareData(newData, oldData) - - if (isEqualLabelsAndDatasetsLength) { - setChartDatasets(chart.data, newData, props.datasetIdKey) - - if (Object.prototype.hasOwnProperty.call(newData, 'labels')) { - setChartLabels(chart, newData.labels, context) - } - - if (Object.prototype.hasOwnProperty.call(newData, 'xLabels')) { - setChartXLabels(chart, newData.xLabels, context) - } + const isEqualLabelsAndDatasetsLength = compareData< + TType, + TData, + TLabel + >(newData, oldData) + + if (isEqualLabelsAndDatasetsLength && chart !== null) { + setChartDatasets( + chart?.data, + newData, + props.datasetIdKey + ) - if (Object.prototype.hasOwnProperty.call(newData, 'yLabels')) { - setChartYLabels(chart, newData.yLabels, context) + if (newData.labels !== undefined) { + setChartLabels( + chart, + newData.labels, + context + ) } - chartUpdate(chart, context) + chartUpdate(chart, context) } else { - if (hasChart.value) { - chartDestroy(chart, context) + if (chart !== null) { + chartDestroy(chart, context) } - chartCreate( + chartCreate( renderChart, - [props.chartData, props.chartOptions], - context + context, + props.chartData, + props.chartOptions as ChartOptions ) } } else { - if (hasChart.value) { - chartDestroy(toRaw(_chart.value), context) + if (_chart.value !== null) { + chartDestroy(toRaw(_chart.value), context) } - chartCreate( + chartCreate( renderChart, - [props.chartData, props.chartOptions], - context + context, + props.chartData, + props.chartOptions as ChartOptions ) } } @@ -163,16 +204,17 @@ export const generateChart = (chartId, chartType, chartController) => 'datasets' in props.chartData && props.chartData.datasets.length > 0 ) { - chartCreate( + chartCreate( renderChart, - [props.chartData, props.chartOptions], - context + context, + props.chartData, + props.chartOptions as ChartOptions ) } }) onBeforeUnmount(() => { - if (hasChart.value) { + if (_chart.value !== null) { chartDestroy(toRaw(_chart.value), context) } }) @@ -187,7 +229,7 @@ export const generateChart = (chartId, chartType, chartController) => }) ]) } - }) + }) as any export const Bar = /* #__PURE__ */ generateChart( 'bar-chart', diff --git a/src/index.js b/src/index.js deleted file mode 100644 index e610f593..00000000 --- a/src/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import { - Bar, - Doughnut, - Line, - Pie, - PolarArea, - Radar, - Bubble, - Scatter, - generateChart -} from './BaseCharts' - -export { - Bar, - Doughnut, - Line, - Pie, - PolarArea, - Radar, - Bubble, - Scatter, - generateChart -} diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 00000000..9a492f62 --- /dev/null +++ b/src/index.ts @@ -0,0 +1 @@ +export * from './BaseCharts' diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 00000000..f6aba083 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,91 @@ +import { Chart as ChartJS } from 'chart.js' +import type { + ChartType, + ChartData, + ChartOptions, + PluginChartOptions, + DefaultDataPoint, + PluginOptionsByType +} from 'chart.js' + +import { + ComponentOptionsMixin, + ComputedOptions, + DefineComponent, + MethodOptions, + Ref, + ShallowRef +} from 'vue' + +import { ChartEmits } from './utils' + +export type TChartData< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +> = ChartData + +export type TChartOptions = ChartOptions + +export type TChartPlugins = PluginChartOptions + +export type TypedChartJS< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +> = ChartJS + +export interface IChartProps< + TType extends ChartType, + TData = DefaultDataPoint, + TLabel = unknown +> { + chartData: TChartData + datasetIdKey?: string + chartOptions?: TChartOptions + chartId?: string + width?: number + height?: number + cssClasses?: string + styles?: Partial + plugins?: PluginOptionsByType +} + +export interface IChartComponentData< + TType extends ChartType, + TData = DefaultDataPoint, + TLabel = unknown +> { + _chart: ShallowRef | null> + canvasEl: Ref + renderChart: ( + data: TChartData, + options: TChartOptions + ) => void + chartDataHandler: ( + newValue: TChartData, + oldValue: TChartData + ) => void +} + +export type TypedChartEmits = { + [ChartEmits.ChartRendered]: () => true + [ChartEmits.ChartUpdated]: () => true + [ChartEmits.ChartDestroyed]: () => true + [ChartEmits.LabelsUpdated]: () => true +} + +export type TypedChartComponent< + TType extends ChartType, + TData = DefaultDataPoint, + TLabel = unknown +> = DefineComponent< + IChartProps, + IChartComponentData, + unknown, + ComputedOptions, + MethodOptions, + ComponentOptionsMixin, + ComponentOptionsMixin, + TypedChartEmits +> diff --git a/src/utils.js b/src/utils.js deleted file mode 100644 index f10a2b32..00000000 --- a/src/utils.js +++ /dev/null @@ -1,96 +0,0 @@ -export function chartCreate( - createChartFunction, - createChartFunctionArgs, - context -) { - createChartFunction(...createChartFunctionArgs) - context.emit('chart:rendered') -} - -export function chartUpdate(chart, context) { - chart.update() - context.emit('chart:updated') -} - -export function chartDestroy(chart, context) { - chart.destroy() - context.emit('chart:destroyed') -} - -export function getChartData(data, datasetIdKey) { - const nextData = { - labels: typeof data.labels === 'undefined' ? [] : [...data.labels], - datasets: [] - } - - setChartDatasets(nextData, { ...data }, datasetIdKey) - return nextData -} - -export function getChartOptions(options, plugins) { - const chartOptions = options - - if (typeof plugins !== 'undefined' && Object.keys(plugins).length > 0) { - chartOptions.plugins = { ...chartOptions.plugins, ...plugins } - } - - return chartOptions -} - -export function setChartDatasets(oldData, newData, datasetIdKey) { - const addedDatasets = [] - - oldData.datasets = newData.datasets.map(nextDataset => { - // given the new set, find it's current match - const currentDataset = oldData.datasets.find( - dataset => dataset[datasetIdKey] === nextDataset[datasetIdKey] - ) - - // There is no original to update, so simply add new one - if ( - !currentDataset || - !nextDataset.data || - addedDatasets.includes(currentDataset) - ) { - return { ...nextDataset } - } - - addedDatasets.push(currentDataset) - - Object.assign(currentDataset, nextDataset) - - return currentDataset - }) -} - -export function setChartLabels(chart, labels, context) { - chart.data.labels = labels - context.emit('labels:updated') -} - -export function setChartXLabels(chart, xLabels, context) { - chart.data.xLabels = xLabels - context.emit('xlabels:updated') -} - -export function setChartYLabels(chart, yLabels, context) { - chart.data.yLabels = yLabels - context.emit('ylabels:updated') -} - -export function compareData(newData, oldData) { - // Get new and old DataSet Labels - const newDatasetLabels = newData.datasets.map(dataset => { - return dataset.label - }) - - const oldDatasetLabels = oldData.datasets.map(dataset => { - return dataset.label - }) - - // Check if Labels are equal and if dataset length is equal - return ( - oldData.datasets.length === newData.datasets.length && - newDatasetLabels.every((value, index) => value === oldDatasetLabels[index]) - ) -} diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 00000000..886f68b9 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,164 @@ +import type { + ChartType, + ChartDataset, + DefaultDataPoint, + PluginOptionsByType +} from 'chart.js' + +import type { TChartData, TChartOptions, TypedChartJS } from './types' + +import { SetupContext } from 'vue' + +export enum ChartEmits { + ChartRendered = 'chart:rendered', + ChartUpdated = 'chart:updated', + ChartDestroyed = 'chart:destroyed', + LabelsUpdated = 'labels:updated' +} + +export function chartCreate< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +>( + createChartFunction: ( + data: TChartData, + options: TChartOptions + ) => void, + context: SetupContext, + chartData: TChartData, + chartOptions: TChartOptions +): void { + createChartFunction(chartData, chartOptions) + context.emit(ChartEmits.ChartRendered) +} + +export function chartUpdate< + TType extends ChartType, + TData = DefaultDataPoint, + TLabel = unknown +>(chart: TypedChartJS, context: SetupContext): void { + chart.update() + context.emit(ChartEmits.ChartUpdated) +} + +export function chartDestroy< + TType extends ChartType, + TData = DefaultDataPoint, + TLabel = unknown +>(chart: TypedChartJS, context: SetupContext): void { + chart.destroy() + context.emit(ChartEmits.ChartDestroyed) +} + +export function getChartData< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +>( + data: TChartData, + datasetIdKey: string +): TChartData { + const nextData = { + labels: typeof data.labels === 'undefined' ? [] : [...data.labels], + datasets: [] + } + + setChartDatasets(nextData, { ...data }, datasetIdKey) + return nextData +} + +export function getChartOptions( + options?: TChartOptions, + plugins?: PluginOptionsByType +): TChartOptions | undefined { + const chartOptions = options + + if ( + chartOptions !== undefined && + 'plugins' in chartOptions && + typeof plugins !== 'undefined' && + Object.keys(plugins).length > 0 + ) { + chartOptions.plugins = { + ...chartOptions.plugins, + ...plugins + } + } + + return chartOptions +} + +export function setChartDatasets< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +>( + oldData: TChartData, + newData: TChartData, + datasetIdKey: string +): void { + const addedDatasets: ChartDataset[] = [] + + oldData.datasets = newData.datasets.map( + (nextDataset: Record) => { + // given the new set, find it's current match + const currentDataset = oldData.datasets.find( + (dataset: Record) => + dataset[datasetIdKey] === nextDataset[datasetIdKey] + ) + + // There is no original to update, so simply add new one + if ( + !currentDataset || + !nextDataset.data || + addedDatasets.includes(currentDataset) + ) { + return { ...nextDataset } + } + + addedDatasets.push(currentDataset) + + Object.assign(currentDataset, nextDataset) + + return currentDataset + } + ) as ChartDataset[] +} + +export function setChartLabels< + TType extends ChartType, + TData = DefaultDataPoint, + TLabel = unknown +>( + chart: TypedChartJS, + labels: TLabel[] | undefined, + context: SetupContext +): void { + chart.data.labels = labels + context.emit(ChartEmits.LabelsUpdated) +} + +export function compareData< + TType extends ChartType = ChartType, + TData = DefaultDataPoint, + TLabel = unknown +>( + newData: TChartData, + oldData: TChartData +): boolean { + // Get new and old DataSet Labels + const newDatasetLabels = newData.datasets.map(dataset => { + return dataset.label + }) + + const oldDatasetLabels = oldData.datasets.map(dataset => { + return dataset.label + }) + + // Check if Labels are equal and if dataset length is equal + return ( + oldData.datasets.length === newData.datasets.length && + newDatasetLabels.every((value, index) => value === oldDatasetLabels[index]) + ) +} diff --git a/stories/bar.stories.js b/stories/bar.stories.ts similarity index 84% rename from stories/bar.stories.js rename to stories/bar.stories.ts index 070b171a..cddca549 100644 --- a/stories/bar.stories.js +++ b/stories/bar.stories.ts @@ -1,4 +1,4 @@ -import BarChart from '../sandboxes/bar/src/components/barChart.vue' +import BarChart from '../sandboxes/bar/src/components/barChart' export default { title: 'BarChart', diff --git a/stories/bubble.stories.js b/stories/bubble.stories.ts similarity index 97% rename from stories/bubble.stories.js rename to stories/bubble.stories.ts index ad49d4cc..8a02a0c6 100644 --- a/stories/bubble.stories.js +++ b/stories/bubble.stories.ts @@ -1,4 +1,4 @@ -import BubbleChart from '../sandboxes/bubble/src/components/bubbleChart.vue' +import BubbleChart from '../sandboxes/bubble/src/components/bubbleChart' export default { title: 'BubbleChart', diff --git a/stories/custom.stories.js b/stories/custom.stories.ts similarity index 97% rename from stories/custom.stories.js rename to stories/custom.stories.ts index 98466bef..4ab4bfbe 100644 --- a/stories/custom.stories.js +++ b/stories/custom.stories.ts @@ -1,4 +1,4 @@ -import CustomChart from '../sandboxes/custom/src/components/customChart.vue' +import CustomChart from '../sandboxes/custom/src/components/customChart' export default { title: 'CustomChart', diff --git a/stories/doughnut.stories.js b/stories/doughnut.stories.ts similarity index 96% rename from stories/doughnut.stories.js rename to stories/doughnut.stories.ts index 8b4c02a0..74a2ff1e 100644 --- a/stories/doughnut.stories.js +++ b/stories/doughnut.stories.ts @@ -1,4 +1,4 @@ -import DoughnutChart from '../sandboxes/doughnut/src/components/doughnutChart.vue' +import DoughnutChart from '../sandboxes/doughnut/src/components/doughnutChart' export default { title: 'DoughnutChart', diff --git a/stories/line.stories.js b/stories/line.stories.ts similarity index 98% rename from stories/line.stories.js rename to stories/line.stories.ts index 6bb27638..318acd59 100644 --- a/stories/line.stories.js +++ b/stories/line.stories.ts @@ -1,4 +1,4 @@ -import LineChart from '../sandboxes/line/src/components/lineChart.vue' +import LineChart from '../sandboxes/line/src/components/lineChart' export default { title: 'LineChart', diff --git a/stories/pie.stories.js b/stories/pie.stories.ts similarity index 84% rename from stories/pie.stories.js rename to stories/pie.stories.ts index 1805cfc7..cc53c067 100644 --- a/stories/pie.stories.js +++ b/stories/pie.stories.ts @@ -1,4 +1,4 @@ -import PieChart from '../sandboxes/pie/src/components/pieChart.vue' +import PieChart from '../sandboxes/pie/src/components/pieChart' export default { title: 'PieChart', diff --git a/stories/polarArea.stories.js b/stories/polarArea.stories.ts similarity index 95% rename from stories/polarArea.stories.js rename to stories/polarArea.stories.ts index fe107a5a..1248d5ec 100644 --- a/stories/polarArea.stories.js +++ b/stories/polarArea.stories.ts @@ -1,4 +1,4 @@ -import PolarAreaChart from '../sandboxes/polar-area/src/components/polarAreaChart.vue' +import PolarAreaChart from '../sandboxes/polar-area/src/components/polarAreaChart' export default { title: 'PolarAreaChart', diff --git a/stories/radar.stories.js b/stories/radar.stories.ts similarity index 97% rename from stories/radar.stories.js rename to stories/radar.stories.ts index 2fa0f599..3c48b96e 100644 --- a/stories/radar.stories.js +++ b/stories/radar.stories.ts @@ -1,4 +1,4 @@ -import RadarChart from '../sandboxes/radar/src/components/radarChart.vue' +import RadarChart from '../sandboxes/radar/src/components/radarChart' export default { title: 'RadarChart', diff --git a/stories/reactive.stories.js b/stories/reactive.stories.ts similarity index 96% rename from stories/reactive.stories.js rename to stories/reactive.stories.ts index ce503a9d..6f999836 100644 --- a/stories/reactive.stories.js +++ b/stories/reactive.stories.ts @@ -1,4 +1,4 @@ -import ReactiveChart from '../sandboxes/reactive/src/components/reactiveChart.vue' +import ReactiveChart from '../sandboxes/reactive/src/components/reactiveChart' export default { title: 'ReactiveChart', diff --git a/stories/reactiveProp.stories.js b/stories/reactiveProp.stories.ts similarity index 98% rename from stories/reactiveProp.stories.js rename to stories/reactiveProp.stories.ts index b11f8da5..e791b111 100644 --- a/stories/reactiveProp.stories.js +++ b/stories/reactiveProp.stories.ts @@ -1,4 +1,4 @@ -import ReactivePropChart from '../sandboxes/reactive-prop/src/components/reactivePropChart.vue' +import ReactivePropChart from '../sandboxes/reactive-prop/src/components/reactivePropChart' export default { title: 'ReactivePropChart', diff --git a/stories/scatter.stories.js b/stories/scatter.stories.ts similarity index 96% rename from stories/scatter.stories.js rename to stories/scatter.stories.ts index eb8b3565..b1b5e42c 100644 --- a/stories/scatter.stories.js +++ b/stories/scatter.stories.ts @@ -1,4 +1,4 @@ -import ScatterChart from '../sandboxes/scatter/src/components/scatterChart.vue' +import ScatterChart from '../sandboxes/scatter/src/components/scatterChart' export default { title: 'ScatterChart', diff --git a/test/Bar.spec.js b/test/Bar.spec.ts similarity index 96% rename from test/Bar.spec.js rename to test/Bar.spec.ts index b6862943..1977678d 100644 --- a/test/Bar.spec.js +++ b/test/Bar.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import BarChart from './examples/BarChart.vue' +import BarChart from './examples/BarChart' describe('BarChart', () => { const Component = { diff --git a/test/Bubble.spec.js b/test/Bubble.spec.ts similarity index 95% rename from test/Bubble.spec.js rename to test/Bubble.spec.ts index dae4d763..02c1dc1a 100644 --- a/test/Bubble.spec.js +++ b/test/Bubble.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import BubbleChart from './examples/BubbleChart.vue' +import BubbleChart from './examples/BubbleChart' describe('BubbleChart', () => { const Component = { diff --git a/test/ChartsTypes.test-d.ts b/test/ChartsTypes.test-d.ts new file mode 100644 index 00000000..9d43861a --- /dev/null +++ b/test/ChartsTypes.test-d.ts @@ -0,0 +1,55 @@ +import { h } from 'vue' +import { expectError } from 'tsd' +import { PluginOptionsByType } from 'chart.js' + +import { Bar, Radar, Scatter, Doughnut } from '../src' + +const chartData = { + datasets: [] +} + +/** + * Should check type-specific props + */ + +h(Radar, { + chartData, + plugins: {} as PluginOptionsByType<'radar'> +}) + +h(Scatter, { + chartData, + plugins: {} as PluginOptionsByType<'scatter'> +}) + +h(Bar, { + chartData, + chartOptions: {} +}) + +expectError( + h(Scatter, { + chartData, + plugins: {} as PluginOptionsByType<'bubble'> + }) +) + +/** + * Should check type-specific options + */ + +h(Doughnut, { + chartData, + chartOptions: { + cutout: '75%' + } +}) + +expectError( + h(Scatter, { + chartData, + chartOptions: { + cutout: '75%' + } + }) +) diff --git a/test/CustomChart.spec.js b/test/CustomChart.spec.ts similarity index 86% rename from test/CustomChart.spec.js rename to test/CustomChart.spec.ts index 2e21e93c..804db765 100644 --- a/test/CustomChart.spec.js +++ b/test/CustomChart.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import CustomChart from './examples/CustomChart.vue' +import CustomChart from './examples/CustomChart' describe('CustomChart', () => { const Component = { diff --git a/test/Doughnut.spec.js b/test/Doughnut.spec.ts similarity index 95% rename from test/Doughnut.spec.js rename to test/Doughnut.spec.ts index 71ea52e7..14471a2b 100644 --- a/test/Doughnut.spec.js +++ b/test/Doughnut.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import DoughnutChart from './examples/DoughnutChart.vue' +import DoughnutChart from './examples/DoughnutChart' describe('DoughnutChart', () => { const Component = { diff --git a/test/Line.spec.js b/test/Line.spec.ts similarity index 95% rename from test/Line.spec.js rename to test/Line.spec.ts index e65e99ea..a480224e 100644 --- a/test/Line.spec.js +++ b/test/Line.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import LineChart from './examples/LineChart.vue' +import LineChart from './examples/LineChart' describe('LineChart', () => { const Component = { diff --git a/test/Pie.spec.js b/test/Pie.spec.ts similarity index 96% rename from test/Pie.spec.js rename to test/Pie.spec.ts index 81d8f893..01124916 100644 --- a/test/Pie.spec.js +++ b/test/Pie.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import PieChart from './examples/PieChart.vue' +import PieChart from './examples/PieChart' describe('PieChart', () => { const Component = { diff --git a/test/PolarArea.spec.js b/test/PolarArea.spec.ts similarity index 95% rename from test/PolarArea.spec.js rename to test/PolarArea.spec.ts index 643ea765..82e04734 100644 --- a/test/PolarArea.spec.js +++ b/test/PolarArea.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import PolarAreaChart from './examples/PolarAreaChart.vue' +import PolarAreaChart from './examples/PolarAreaChart' describe('PolarChart', () => { const Component = { diff --git a/test/Radar.spec.js b/test/Radar.spec.ts similarity index 95% rename from test/Radar.spec.js rename to test/Radar.spec.ts index 0ada95fb..d0f9567e 100644 --- a/test/Radar.spec.js +++ b/test/Radar.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import RadarChart from './examples/RadarChart.vue' +import RadarChart from './examples/RadarChart' describe('RadarChart', () => { const Component = { diff --git a/test/Reactive.spec.js b/test/Reactive.spec.ts similarity index 86% rename from test/Reactive.spec.js rename to test/Reactive.spec.ts index 111928c1..9a69f4f6 100644 --- a/test/Reactive.spec.js +++ b/test/Reactive.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import ReactiveChart from './examples/ReactiveChart.vue' +import ReactiveChart from './examples/ReactiveChart' describe('ReactiveChart', () => { const Component = { diff --git a/test/ReactiveProp.spec.js b/test/ReactiveProp.spec.ts similarity index 87% rename from test/ReactiveProp.spec.js rename to test/ReactiveProp.spec.ts index 0b2e6b6e..3d71449e 100644 --- a/test/ReactiveProp.spec.js +++ b/test/ReactiveProp.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import ReactivePropChart from './examples/ReactivePropChart.vue' +import ReactivePropChart from './examples/ReactivePropChart' describe('ReactivePropChart', () => { const Component = { diff --git a/test/Scatter.spec.js b/test/Scatter.spec.ts similarity index 95% rename from test/Scatter.spec.js rename to test/Scatter.spec.ts index c96d975f..e69a837f 100644 --- a/test/Scatter.spec.js +++ b/test/Scatter.spec.ts @@ -1,5 +1,5 @@ import { mount } from '@vue/test-utils' -import ScatterChart from './examples/ScatterChart.vue' +import ScatterChart from './examples/ScatterChart' describe('ScatterChart', () => { const Component = { diff --git a/test/examples/BarChart.vue b/test/examples/BarChart.ts similarity index 85% rename from test/examples/BarChart.vue rename to test/examples/BarChart.ts index e1074113..3c7baf9a 100644 --- a/test/examples/BarChart.vue +++ b/test/examples/BarChart.ts @@ -1,6 +1,7 @@ - diff --git a/test/examples/BubbleChart.vue b/test/examples/BubbleChart.ts similarity index 88% rename from test/examples/BubbleChart.vue rename to test/examples/BubbleChart.ts index 8306a949..c886d80b 100644 --- a/test/examples/BubbleChart.vue +++ b/test/examples/BubbleChart.ts @@ -1,6 +1,6 @@ - diff --git a/test/examples/CustomChart.vue b/test/examples/CustomChart.ts similarity index 83% rename from test/examples/CustomChart.vue rename to test/examples/CustomChart.ts index 6b3d3c85..2daebce5 100644 --- a/test/examples/CustomChart.vue +++ b/test/examples/CustomChart.ts @@ -1,7 +1,6 @@ - diff --git a/test/examples/DoughnutChart.vue b/test/examples/DoughnutChart.ts similarity index 83% rename from test/examples/DoughnutChart.vue rename to test/examples/DoughnutChart.ts index ea71c7e5..89808010 100644 --- a/test/examples/DoughnutChart.vue +++ b/test/examples/DoughnutChart.ts @@ -1,14 +1,14 @@ - diff --git a/test/examples/LineChart.vue b/test/examples/LineChart.ts similarity index 83% rename from test/examples/LineChart.vue rename to test/examples/LineChart.ts index 3861195f..0e31caab 100644 --- a/test/examples/LineChart.vue +++ b/test/examples/LineChart.ts @@ -1,14 +1,14 @@ - diff --git a/test/examples/PieChart.vue b/test/examples/PieChart.ts similarity index 83% rename from test/examples/PieChart.vue rename to test/examples/PieChart.ts index 6236bd2f..d48d722b 100644 --- a/test/examples/PieChart.vue +++ b/test/examples/PieChart.ts @@ -1,14 +1,14 @@ - diff --git a/test/examples/PolarAreaChart.vue b/test/examples/PolarAreaChart.ts similarity index 88% rename from test/examples/PolarAreaChart.vue rename to test/examples/PolarAreaChart.ts index ef13feef..208b6f79 100644 --- a/test/examples/PolarAreaChart.vue +++ b/test/examples/PolarAreaChart.ts @@ -1,14 +1,14 @@ - diff --git a/test/examples/RadarChart.vue b/test/examples/RadarChart.ts similarity index 88% rename from test/examples/RadarChart.vue rename to test/examples/RadarChart.ts index 1ddbe70e..12a31374 100644 --- a/test/examples/RadarChart.vue +++ b/test/examples/RadarChart.ts @@ -1,14 +1,14 @@ - diff --git a/test/examples/ReactiveChart.vue b/test/examples/ReactiveChart.ts similarity index 86% rename from test/examples/ReactiveChart.vue rename to test/examples/ReactiveChart.ts index 77a0a326..3cdf5458 100644 --- a/test/examples/ReactiveChart.vue +++ b/test/examples/ReactiveChart.ts @@ -1,6 +1,5 @@ - diff --git a/test/examples/ReactivePropChart.vue b/test/examples/ReactivePropChart.ts similarity index 76% rename from test/examples/ReactivePropChart.vue rename to test/examples/ReactivePropChart.ts index 6729806b..612adb5c 100644 --- a/test/examples/ReactivePropChart.vue +++ b/test/examples/ReactivePropChart.ts @@ -1,5 +1,4 @@ - diff --git a/test/examples/ScatterChart.vue b/test/examples/ScatterChart.ts similarity index 89% rename from test/examples/ScatterChart.vue rename to test/examples/ScatterChart.ts index f4b3ed7d..e6a20fdd 100644 --- a/test/examples/ScatterChart.vue +++ b/test/examples/ScatterChart.ts @@ -1,14 +1,14 @@ - diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..df120f0f --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,39 @@ +{ + "compilerOptions": { + /* Type Checking */ + "strict": true, + "strictBindCallApply": true, + "noFallthroughCasesInSwitch": true, + "noImplicitOverride": true, + "noImplicitReturns": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + /* Modules */ + "baseUrl": ".", + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + /* Emit */ + "declaration": true, + "declarationMap": true, + "inlineSourceMap": true, + "outDir": "dist", + /* Interop Constraints */ + "allowSyntheticDefaultImports": true, + "isolatedModules": true, + /* Language and Environment */ + "lib": [ + "dom", + "esnext" + ], + "target": "esnext", + /* Completeness */ + "skipLibCheck": true + }, + "include": [ + "src" + ], + "exclude": [ + "dist" + ] +} diff --git a/types/components.d.ts b/types/components.d.ts deleted file mode 100644 index fcc7b4ad..00000000 --- a/types/components.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import Vue from 'vue' -import 'chart.js' - -/** vue-chartjs component common definition */ -export declare class BaseChart extends Vue { - addPlugin (plugin?: object): void - renderChart (chartData: Chart.ChartData, options?: Chart.ChartOptions): void -} diff --git a/types/index.d.ts b/types/index.d.ts deleted file mode 100644 index 7893ae61..00000000 --- a/types/index.d.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { BaseChart } from './components' -import { ReactiveDataMixin, ReactivePropMixin } from './mixins' - -declare module 'vue-chartjs' { - export function generateChart(chartId: string, chartType: string): any; - export class Bar extends BaseChart {} - export class HorizontalBar extends BaseChart {} - export class Doughnut extends BaseChart {} - export class Line extends BaseChart {} - export class Pie extends BaseChart {} - export class PolarArea extends BaseChart {} - export class Radar extends BaseChart {} - export class Bubble extends BaseChart {} - export class Scatter extends BaseChart {} - export const mixins: { - reactiveData: typeof ReactiveDataMixin - reactiveProp: typeof ReactivePropMixin - } -} - diff --git a/types/mixins.d.ts b/types/mixins.d.ts deleted file mode 100644 index 3aec7595..00000000 --- a/types/mixins.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import Vue from 'vue'; -import 'chart.js'; - -export declare class ReactiveDataMixin extends Vue { - chartData: Chart.ChartData; -} - -export declare class ReactivePropMixin extends Vue { - readonly chartData: Chart.ChartData; -}