refactor(plugin-google-gtag, plugin-google-analytics): migrate packages to TS (#5561)

* migration

* Move to devDeps

* Use type assertion

packages/docusaurus-plugin-google-analytics/package.json

@@ -2,10 +2,15 @@
   "name": "@docusaurus/plugin-google-analytics",
   "version": "2.0.0-beta.6",
   "description": "Global analytics (analytics.js) plugin for Docusaurus.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
+  "types": "src/plugin-google-analytics.d.ts",
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/docusaurus.git",
@@ -15,6 +20,9 @@
   "dependencies": {
     "@docusaurus/core": "2.0.0-beta.6"
   },
+  "devDependencies": {
+    "@docusaurus/types": "2.0.0-beta.6"
+  },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"

packages/docusaurus-plugin-google-analytics/src/analytics.ts

@@ -13,7 +13,7 @@ export default (function () {
   }
 
   return {
-    onRouteUpdate({location}) {
+    onRouteUpdate({location}: {location: Location}) {
       // Set page so that subsequent hits on this page are attributed
       // to this page. This is recommended for Single-page Applications.
       window.ga('set', 'page', location.pathname);

packages/docusaurus-plugin-google-analytics/src/index.ts

@@ -5,12 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
+import path from 'path';
+import type {LoadContext, Plugin, HtmlTags} from '@docusaurus/types';
+import type {ThemeConfig} from '@docusaurus/plugin-google-analytics';
 
-module.exports = function (context) {
-  const {siteConfig} = context;
-  const {themeConfig} = siteConfig;
-  const {googleAnalytics} = themeConfig || {};
+export default function pluginGoogleAnalytics(context: LoadContext): Plugin {
+  const {
+    siteConfig: {themeConfig},
+  } = context;
+  const {googleAnalytics} = themeConfig as ThemeConfig;
 
   if (!googleAnalytics) {
     throw new Error(
@@ -66,8 +69,8 @@ module.exports = function (context) {
               src: 'https://www.google-analytics.com/analytics.js',
             },
           },
-        ],
+        ] as HtmlTags,
       };
     },
   };
-};
+}

packages/docusaurus-plugin-google-analytics/src/plugin-google-analytics.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export interface ThemeConfig {
+  googleAnalytics?: {
+    trackingID: string;
+    anonymizeIP?: boolean;
+  };
+}

packages/docusaurus-plugin-google-analytics/src/types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// <reference types="@docusaurus/module-type-aliases" />
+
+interface Window {
+  ga: (command: string, ...fields: string[]) => void;
+}

packages/docusaurus-plugin-google-analytics/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib"
+  }
+}

packages/docusaurus-plugin-google-gtag/package.json

@@ -2,7 +2,12 @@
   "name": "@docusaurus/plugin-google-gtag",
   "version": "2.0.0-beta.6",
   "description": "Global Site Tag (gtag.js) plugin for Docusaurus.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
+  "types": "src/plugin-google-gtag.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -15,6 +20,9 @@
   "dependencies": {
     "@docusaurus/core": "2.0.0-beta.6"
   },
+  "devDependencies": {
+    "@docusaurus/types": "2.0.0-beta.6"
+  },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"

packages/docusaurus-plugin-google-gtag/src/gtag.ts

@@ -7,20 +7,19 @@
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import siteConfig from '@generated/docusaurus.config';
+import type {ThemeConfig} from '@docusaurus/plugin-google-gtag';
 
 export default (function () {
   if (!ExecutionEnvironment.canUseDOM) {
     return null;
   }
 
-  const {
-    themeConfig: {
-      gtag: {trackingID},
-    },
-  } = siteConfig;
+  const {themeConfig} = siteConfig;
+  const {gtag} = themeConfig as ThemeConfig;
+  const {trackingID} = gtag!;
 
   return {
-    onRouteUpdate({location}) {
+    onRouteUpdate({location}: {location: Location}) {
       // Always refer to the variable on window in-case it gets overridden elsewhere.
       window.gtag('config', trackingID, {
         page_path: location.pathname,

packages/docusaurus-plugin-google-gtag/src/index.ts

@@ -5,12 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
+import path from 'path';
+import type {LoadContext, Plugin, HtmlTags} from '@docusaurus/types';
+import type {ThemeConfig} from '@docusaurus/plugin-google-gtag';
 
-module.exports = function (context) {
-  const {siteConfig} = context;
-  const {themeConfig} = siteConfig;
-  const {gtag} = themeConfig || {};
+export default function pluginGoogleGtag(context: LoadContext): Plugin {
+  const {
+    siteConfig: {themeConfig},
+  } = context;
+  const {gtag} = themeConfig as ThemeConfig;
 
   if (!gtag) {
     throw new Error(
@@ -75,8 +78,8 @@ module.exports = function (context) {
               anonymizeIP ? "'anonymize_ip': true" : ''
             } });`,
           },
-        ],
+        ] as HtmlTags,
       };
     },
   };
-};
+}

packages/docusaurus-plugin-google-gtag/src/plugin-google-gtag.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export interface ThemeConfig {
+  gtag?: {
+    trackingID: string;
+    anonymizeIP?: boolean;
+  };
+}

packages/docusaurus-plugin-google-gtag/src/types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable camelcase */
+/// <reference types="@docusaurus/module-type-aliases" />
+
+interface Window {
+  gtag: (
+    command: string,
+    fields: string,
+    params: {
+      page_title?: string;
+      page_location?: string;
+      page_path?: string;
+    },
+  ) => void;
+}

packages/docusaurus-plugin-google-gtag/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib"
+  }
+}

packages/docusaurus-preset-classic/src/preset-classic.d.ts

@@ -14,10 +14,10 @@ export type Options = {
   theme?: import('@docusaurus/theme-classic').Options;
 };
 
-export type ThemeConfig = import('@docusaurus/theme-common').ThemeConfig & {
+export type ThemeConfig = import('@docusaurus/theme-common').ThemeConfig &
+  import('@docusaurus/plugin-google-analytics').ThemeConfig &
+  import('@docusaurus/plugin-google-gtag').ThemeConfig & {
     // Those themeConfigs should rather be moved to preset/plugin options
     // Plugin data can be made available to browser thank to the globalData api
     algolia?: unknown; // TODO type plugin
-  googleAnalytics?: unknown; // TODO type plugin
-  gtag?: unknown; // TODO type plugin
-};
+  };