refactor(theme-search-algolia): migrate package to TS

.eslintignore

@@ -14,6 +14,7 @@ packages/docusaurus/lib/
 packages/docusaurus-*/lib/*
 packages/docusaurus-*/lib-next/
 packages/docusaurus-plugin-ideal-image/copyUntypedFiles.js
+packages/docusaurus-theme-search-algolia/copyUntypedFiles.js
 
 packages/create-docusaurus/lib/*
 packages/create-docusaurus/templates/facebook/.eslintrc.js

packages/docusaurus-plugin-ideal-image/copyUntypedFiles.js

@@ -15,6 +15,6 @@ const srcDir = path.resolve(__dirname, 'src');
 const libDir = path.resolve(__dirname, 'lib');
 fs.copySync(srcDir, libDir, {
   filter(filepath) {
-    return !/__tests__/.test(filepath) && !/\.ts$/.test(filepath);
+    return !/__tests__/.test(filepath) && !/\.tsx?$/.test(filepath);
   },
 });

packages/docusaurus-theme-classic/update-code-translations.js

@@ -15,7 +15,13 @@ const CodeDirPaths = [
   path.join(__dirname, 'lib-next'),
   // TODO other themes should rather define their own translations in the future?
   path.join(__dirname, '..', 'docusaurus-theme-common', 'lib'),
-  path.join(__dirname, '..', 'docusaurus-theme-search-algolia', 'src', 'theme'),
+  path.join(
+    __dirname,
+    '..',
+    'docusaurus-theme-search-algolia',
+    'lib-next',
+    'theme',
+  ),
   path.join(__dirname, '..', 'docusaurus-theme-live-codeblock', 'src', 'theme'),
   path.join(__dirname, '..', 'docusaurus-plugin-pwa', 'src', 'theme'),
 ];

packages/docusaurus-theme-common/src/index.ts

@@ -22,6 +22,8 @@ export {createStorageSlot, listStorageKeys} from './utils/storageUtils';
 
 export {useAlternatePageUtils} from './utils/useAlternatePageUtils';
 
+export {useContextualSearchFilters} from './utils/useContextualSearchFilters';
+
 export {
   parseCodeBlockTitle,
   parseLanguage,

packages/docusaurus-theme-classic/src/theme/hooks/useContextualSearchFilters.ts → packages/docusaurus-theme-common/src/utils/useContextualSearchFilters.ts

@@ -5,21 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 import {useAllDocsData, useActivePluginAndVersion} from '@theme/hooks/useDocs';
-import {
-  useDocsPreferredVersionByPluginId,
-  DEFAULT_SEARCH_TAG,
-  docVersionSearchTag,
-} from '@docusaurus/theme-common';
+import {useDocsPreferredVersionByPluginId} from './docsPreferredVersion/useDocsPreferredVersion';
+import {docVersionSearchTag, DEFAULT_SEARCH_TAG} from './searchUtils';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-type ContextualSearchFilters = {
+export type useContextualSearchFiltersReturns = {
   locale: string;
   tags: string[];
 };
 
 // We may want to support multiple search engines, don't couple that to Algolia/DocSearch
 // Maybe users will want to use its own search engine solution
-export default function useContextualSearchFilters(): ContextualSearchFilters {
+export function useContextualSearchFilters(): useContextualSearchFiltersReturns {
   const {i18n} = useDocusaurusContext();
   const allDocsData = useAllDocsData();
   const activePluginAndVersion = useActivePluginAndVersion();

packages/docusaurus-theme-search-algolia/babel.config.js

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+module.exports = {
+  env: {
+    // USED FOR NODE/RUNTIME
+    // maybe we should differenciate both cases because
+    // we mostly need to transpile some features so that node does not crash...
+    lib: {
+      presets: [
+        ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
+      ],
+      // Useful to transpile for older node versions
+      plugins: [
+        '@babel/plugin-transform-modules-commonjs',
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        '@babel/plugin-proposal-optional-chaining',
+      ],
+    },
+
+    // USED FOR JS SWIZZLE
+    // /lib-next folder is used as source to swizzle JS source code
+    // This JS code is created from TS source code
+    // This source code should look clean/human readable to be usable
+    'lib-next': {
+      presets: [
+        ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
+      ],
+    },
+  },
+};

packages/docusaurus-theme-search-algolia/copyUntypedFiles.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+const path = require('path');
+const fs = require('fs-extra');
+
+/**
+ * Copy all untyped and static assets files to lib.
+ */
+const srcDir = path.resolve(__dirname, 'src');
+const libDir = path.resolve(__dirname, 'lib');
+fs.copySync(srcDir, libDir, {
+  filter(filepath) {
+    return !/__tests__/.test(filepath) && !/\.tsx?$/.test(filepath);
+  },
+});

packages/docusaurus-theme-search-algolia/package.json

@@ -2,7 +2,8 @@
   "name": "@docusaurus/theme-search-algolia",
   "version": "2.0.0-beta.9",
   "description": "Algolia search component for Docusaurus.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
+  "types": "src/theme-search-algolia.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -12,6 +13,13 @@
     "directory": "packages/docusaurus-theme-search-algolia"
   },
   "license": "MIT",
+  "scripts": {
+    "build": "yarn build:server & yarn build:browser & yarn build:next & yarn build:copy",
+    "build:server": "tsc --project tsconfig.server.json",
+    "build:browser": "tsc --project tsconfig.browser.json",
+    "build:next": "tsc --project tsconfig.browser.json --jsx preserve --outDir lib-next",
+    "build:copy": "node copyUntypedFiles.js"
+  },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.39",
     "@docusaurus/core": "2.0.0-beta.9",
@@ -24,6 +32,10 @@
     "eta": "^1.12.3",
     "lodash": "^4.17.20"
   },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.9",
+    "fs-extra": "^10.0.0"
+  },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"

packages/docusaurus-theme-search-algolia/src/index.js → packages/docusaurus-theme-search-algolia/src/index.ts

@@ -5,26 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
-const fs = require('fs');
-const eta = require('eta');
-const {normalizeUrl, getSwizzledComponent} = require('@docusaurus/utils');
-const openSearchTemplate = require('./templates/opensearch');
-const {validateThemeConfig} = require('./validateThemeConfig');
-const {memoize} = require('lodash');
+import path from 'path';
+import fs from 'fs';
+import {defaultConfig, compile} from 'eta';
+import {normalizeUrl, getSwizzledComponent} from '@docusaurus/utils';
+import openSearchTemplate from './templates/opensearch';
+import {memoize} from 'lodash';
+
+import type {DocusaurusContext, Plugin} from '@docusaurus/types';
 
 const getCompiledOpenSearchTemplate = memoize(() => {
-  return eta.compile(openSearchTemplate.trim());
+  return compile(openSearchTemplate.trim());
 });
 
-function renderOpenSearchTemplate(data) {
+function renderOpenSearchTemplate(data: {
+  title: string;
+  url: string;
+  favicon: string | null;
+}) {
   const compiled = getCompiledOpenSearchTemplate();
-  return compiled(data, eta.defaultConfig);
+  return compiled(data, defaultConfig);
 }
 
 const OPEN_SEARCH_FILENAME = 'opensearch.xml';
 
-function theme(context) {
+export default function theme(
+  context: DocusaurusContext & {baseUrl: string},
+): Plugin<void> {
   const {
     baseUrl,
     siteConfig: {title, url, favicon},
@@ -37,12 +44,16 @@ function theme(context) {
   return {
     name: 'docusaurus-theme-search-algolia',
 
+    getPathsToWatch() {
+      return [pagePath];
+    },
+
     getThemePath() {
       return path.resolve(__dirname, './theme');
     },
 
-    getPathsToWatch() {
-      return [pagePath];
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, '..', 'src', 'theme');
     },
 
     async contentLoaded({actions: {addRoute}}) {
@@ -87,6 +98,4 @@ function theme(context) {
   };
 }
 
-module.exports = theme;
-
-theme.validateThemeConfig = validateThemeConfig;
+export {validateThemeConfig} from './validateThemeConfig';

packages/docusaurus-theme-search-algolia/src/templates/opensearch.js → packages/docusaurus-theme-search-algolia/src/templates/opensearch.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-module.exports = `
+export default `
 <?xml version="1.0" encoding="UTF-8"?>
 <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
                        xmlns:moz="http://www.mozilla.org/2006/browser/search/">

packages/docusaurus-theme-search-algolia/src/theme-search-algolia.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ */
+
+declare module '@docusaurus/theme-search-algolia' {
+  export type Options = never;
+}
+
+declare module '@theme/hooks/useSearchQuery' {
+  export interface SearchQuery {
+    searchQuery: string;
+
+    setSearchQuery(newSearchQuery: string): void;
+
+    generateSearchPageLink(targetSearchQuery: string): string;
+  }
+
+  export default function useSearchQuery(): SearchQuery;
+}
+
+declare module '@theme/hooks/useAlgoliaContextualFacetFilters' {
+  export type useAlgoliaContextualFacetFiltersReturns = [string, string[]];
+
+  export default function useAlgoliaContextualFacetFilters(): useAlgoliaContextualFacetFiltersReturns;
+}
+
+declare module '@theme/SearchPage' {
+  const SearchPage: () => JSX.Element;
+  export default SearchPage;
+}
+
+declare module '@theme/SearchMetadata' {
+  export type SearchMetadataProps = {
+    readonly locale?: string;
+    readonly version?: string;
+    readonly tag?: string;
+  };
+
+  const SearchMetadata: (props: SearchMetadataProps) => JSX.Element;
+  export default SearchMetadata;
+}
+
+declare module '@theme/SearchBar' {
+  const SearchBar: () => JSX.Element;
+  export default SearchBar;
+}