feat: push keyboard buttons till client (#983)

This fixes a UI flash issue on Windows where the <kbd>⌘</kbd> key shows up right before <kbd>Ctrl</kbd> when using SSG (like Docusaurus). This happened because in these scenarii, the site is generated on a server, and we can't know yet what will the user's OS be. Closes facebook/docusaurus#3682.
algolia · Nov 5, 2020 · 9e4c69d · 9e4c69d
1 parent b3ee1cc
commit 9e4c69d
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 1,244 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "build:types": "lerna run build:types --scope @docsearch/*",
     "build:umd": "lerna run build:umd --scope @docsearch/*",
     "build": "lerna run build --scope @docsearch/*",
-    "cy:clean": "rm -rf cypress/screenshots",
+    "cy:clean": "rimraf cypress/screenshots",
     "cy:info": "cypress info",
     "cy:record": "percy exec -- cypress run --spec 'cypress/integration/**/*' --headless --record",
     "cy:run:chrome": "yarn run cy:run --browser chrome",
@@ -51,6 +51,7 @@
     "babel-plugin-module-resolver": "4.0.0",
     "bundlesize": "0.18.0",
     "concurrently": "5.3.0",
+    "cross-env": "7.0.2",
     "cssnano": "4.1.10",
     "cypress": "4.8.0",
     "dotenv": "8.2.0",
@@ -71,6 +72,7 @@
     "prettier": "2.1.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "rimraf": "3.0.2",
     "rollup": "1.31.0",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-commonjs": "10.1.0",

diff --git a/packages/docsearch-css/package.json b/packages/docsearch-css/package.json
@@ -17,7 +17,7 @@
   "unpkg": "dist/style.css",
   "jsdelivr": "dist/style.css",
   "scripts": {
-    "build:clean": "rm -rf ./dist",
+    "build:clean": "rimraf ./dist",
     "build:css": "node build-css.js",
     "build": "yarn build:clean && mkdir dist && yarn build:css",
     "prepare": "yarn build",

diff --git a/packages/docsearch-js/package.json b/packages/docsearch-js/package.json
@@ -21,10 +21,10 @@
   "unpkg": "dist/umd/index.js",
   "jsdelivr": "dist/umd/index.js",
   "scripts": {
-    "build:clean": "rm -rf ./dist",
-    "build:esm": "BUILD=esm rollup --config",
+    "build:clean": "rimraf ./dist",
+    "build:esm": "cross-env BUILD=esm rollup --config",
     "build:types": "tsc -p ./tsconfig.declaration.json --outFile ./dist/esm/index.d.ts",
-    "build:umd": "BUILD=umd rollup --config",
+    "build:umd": "cross-env BUILD=umd rollup --config",
     "build": "yarn build:clean && yarn build:umd && yarn build:esm && yarn build:types",
     "on:change": "concurrently \"yarn build:esm\" \"yarn build:types\"",
     "prepare": "yarn build:esm",

diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -8,28 +8,28 @@ export type DocSearchButtonProps = React.DetailedHTMLProps<
   HTMLButtonElement
 >;
 
-const ACTION_KEY_DEFAULT = 'Ctrl';
-const ACTION_KEY_APPLE = '⌘';
+const ACTION_KEY_DEFAULT = 'Ctrl' as const;
+const ACTION_KEY_APPLE = '⌘' as const;
 
-function isAppleDevice() {
-  if (typeof navigator === 'undefined') {
-    return ACTION_KEY_DEFAULT;
-  }
+function hasNavigator() {
+  return typeof navigator === 'undefined';
+}
 
+function isAppleDevice() {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
 }
 
 export const DocSearchButton = React.forwardRef<
   HTMLButtonElement,
   DocSearchButtonProps
 >((props, ref) => {
-  const [key, setKey] = useState(() =>
-    isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT
-  );
+  const [key, setKey] = useState<
+    typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null
+  >(null);
 
   useEffect(() => {
-    if (isAppleDevice()) {
-      setKey(ACTION_KEY_APPLE);
+    if (hasNavigator()) {
+      setKey(isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT);
     }
   }, []);
 
@@ -46,12 +46,14 @@ export const DocSearchButton = React.forwardRef<
         <span className="DocSearch-Button-Placeholder">Search</span>
       </div>
 
-      <div className="DocSearch-Button-Keys">
-        <span className="DocSearch-Button-Key">
-          {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
-        </span>
-        <span className="DocSearch-Button-Key">K</span>
-      </div>
+      {key !== null ? (
+        <div className="DocSearch-Button-Keys">
+          <span className="DocSearch-Button-Key">
+            {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
+          </span>
+          <span className="DocSearch-Button-Key">K</span>
+        </div>
+      ) : null}
     </button>
   );
 });