Fix docs build (#10566)

docs/.vuepress/config.ts

@@ -1,8 +1,11 @@
-const path = require('path');
-const docsVersion = "VERSION";
-const base = process.env.NODE_ENV === "development" ? '/docs/master/' : `/docs/${docsVersion}/`;
+import { DefaultThemeConfig, defineConfig, PluginTuple } from "vuepress/config";
+import * as path from 'path';
+import markdownItInclude from 'markdown-it-include';
 
-module.exports = {
+const docsVersion = "VERSION";
+const base: `/${string}/` = process.env.NODE_ENV === "development" ? '/docs/master/' : `/docs/${docsVersion}/`;
+
+export default defineConfig({
   title: 'Chart.js',
   description: 'Open source HTML5 Charts for your website',
   theme: 'chartjs',
@@ -30,16 +33,10 @@ module.exports = {
       ],
     }],
     ['vuepress-plugin-code-copy', true],
-    [
-      'vuepress-plugin-typedoc',
-      {
+    ['vuepress-plugin-typedoc', {
         entryPoints: ['../../types/index.d.ts'],
         hideInPageTOC: true,
         tsconfig: 'tsconfig.json',
-        sidebar: {
-          fullNames: true,
-          parentCategory: 'API',
-        },
       },
     ],
     ['@simonbrunel/vuepress-plugin-versions', {
@@ -48,7 +45,7 @@ module.exports = {
         title: (v, vars) => {
           return window.location.href.includes('master') ? 'Development (master)' :
                  vars.tag === 'latest' ? 'Latest (' + v + ')' :
-                 v + (vars.tag ? ` (${tag})` : '') + ' (outdated)';
+                 v + (vars.tag ? ` (${vars.tag})` : '') + ' (outdated)';
         },
       },
       menu: {
@@ -89,7 +86,7 @@ module.exports = {
         ]
       },
     }],
-  ],
+  ] as PluginTuple[],
   chainWebpack(config) {
     config.merge({
       resolve: {
@@ -101,7 +98,7 @@ module.exports = {
   },
   markdown: {
     extendMarkdown: md => {
-      md.use(require('markdown-it-include'), path.resolve(__dirname, '../'));
+      md.use(markdownItInclude, path.resolve(__dirname, '../'));
     }
   },
   themeConfig: {
@@ -134,9 +131,7 @@ module.exports = {
       }
     ],
     sidebar: {
-      '/api/': {
-        title: 'API'
-      },
+      '/api/': 'API',
       '/samples/': [
         'information',
         {
@@ -389,6 +384,6 @@ module.exports = {
           ]
         },
       ],
-    }
-  }
-};
+    } as any
+  } as DefaultThemeConfig
+});

package.json

@@ -2,7 +2,7 @@
     "name": "chart.js",
     "homepage": "https://www.chartjs.org",
     "description": "Simple HTML5 charts using the canvas element.",
-    "version": "3.9.0",
+    "version": "4.0.0-dev",
     "license": "MIT",
     "type": "module",
     "jsdelivr": "dist/chart.umd.js",
@@ -65,7 +65,7 @@
         "@types/offscreencanvas": "^2019.6.4",
         "@typescript-eslint/eslint-plugin": "^5.8.0",
         "@typescript-eslint/parser": "^5.8.0",
-        "@vuepress/plugin-google-analytics": "^1.8.3",
+        "@vuepress/plugin-google-analytics": "^1.9.7",
         "@vuepress/plugin-html-redirect": "^0.1.2",
         "chartjs-adapter-luxon": "^1.0.0",
         "chartjs-adapter-moment": "^1.0.0",
@@ -103,17 +103,18 @@
         "rollup-plugin-istanbul": "^3.0.0",
         "rollup-plugin-terser": "^7.0.2",
         "size-limit": "^7.0.8",
-        "typedoc": "^0.22.10",
-        "typedoc-plugin-markdown": "^3.6.1",
-        "typescript": "^4.3.5",
+        "typedoc": "^0.23.10",
+        "typedoc-plugin-markdown": "^3.13.4",
+        "typescript": "^4.7.4",
         "vue-tabs-component": "^1.5.0",
-        "vuepress": "^1.8.2",
+        "vuepress": "^1.9.7",
         "vuepress-plugin-code-copy": "^1.0.6",
         "vuepress-plugin-flexsearch": "^0.3.0",
         "vuepress-plugin-redirect": "^1.2.5",
         "vuepress-plugin-tabs": "^0.3.0",
-        "vuepress-plugin-typedoc": "^0.10.0",
+        "vuepress-plugin-typedoc": "^0.11.0",
         "vuepress-theme-chartjs": "^0.2.0",
+        "webpack": "^4.46.0",
         "yargs": "^17.0.1"
     }
 }

scripts/docs-config.sh

@@ -9,4 +9,4 @@ MODE=$2
 
 TAG=$(tag_from_version "$VERSION" "$MODE")
 
-sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.js"
+sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.ts"

types/index.d.ts

@@ -65,7 +65,7 @@ export interface ControllerDatasetOptions extends ParsingOptions {
    */
   indexAxis: 'x' | 'y';
   /**
-   * How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
+   * How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
    */
   clip: number | ChartArea | false;
   /**
@@ -1456,7 +1456,7 @@ export interface CoreChartOptions<TType extends ChartType> extends ParsingOption
   indexAxis: 'x' | 'y';
 
   /**
-   * How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
+   * How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
    */
   clip: number | ChartArea | false;
 
@@ -3296,7 +3296,7 @@ export type TimeScaleOptions = Omit<CartesianScaleOptions, 'min' | 'max'> & {
     /**
      * Ticks generation input values:
      * - 'auto': generates "optimal" ticks based on scale size and time options.
-     * - 'data': generates ticks from data (including labels from data {t|x|y} objects).
+     * - 'data': generates ticks from data (including labels from data `{t|x|y}` objects).
      * - 'labels': generates ticks from user given `data.labels` values ONLY.
      * @see https://github.com/chartjs/Chart.js/pull/4507
      * @since 2.7.0