Fix metrics, SSR support

Add SSR support by checking to render server-side or client-side.

Also made key offsets as trade-off of accuracy and pixel-perfectness.

.gitignore

@@ -90,4 +90,3 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .pnp.*
-keys.html

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.9",
+  "version": "1.0.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/Keyboard/Keyboard.tsx

@@ -78,7 +78,8 @@ const Keyboard: React.FC<Props> = ({
   keyComponents = {},
   height = 80,
 }) => {
-  const [keys, setKeys] = React.useState<number[]>([])
+  const [clientSide, setClientSide] = React.useState(false)
+  const [clientSideKeys, setClientSideKeys] = React.useState<number[]>([])
 
   const { natural: NaturalKey = DefaultNaturalKey, accidental: AccidentalKey = DefaultAccidentalKey } = keyComponents!
 
@@ -87,9 +88,15 @@ const Keyboard: React.FC<Props> = ({
   const isNaturalKey = React.useCallback((k) => isNaturalKeyUnmemoized(k), [])
 
   React.useEffect(() => {
-    setKeys(generateKeys(startKey!, endKey!))
+    setClientSide(true)
+  }, [])
+
+  React.useEffect(() => {
+    setClientSideKeys(generateKeys(startKey!, endKey!))
   }, [startKey, endKey])
 
+  const keys = clientSide ? clientSideKeys : generateKeys(startKey, endKey)
+
   return (
     <div
       style={{

src/index.ts

@@ -1,8 +1,7 @@
 import Keyboard from './components/Keyboard/Keyboard'
 import StyledNaturalKey from './components/StyledNaturalKey/StyledNaturalKey'
 import StyledAccidentalKey from './components/StyledAccidentalKey/StyledAccidentalKey'
-import keyPropTypes from './services/keyPropTypes'
 
 export default Keyboard
 
-export { keyPropTypes, StyledNaturalKey, StyledAccidentalKey }
+export { StyledNaturalKey, StyledAccidentalKey }

src/services/constants.ts

@@ -20,6 +20,7 @@
 
  */
 
+// basic and naive
 // export const KEY_OFFSETS = [
 //   0, // C
 //   3 / 7 / 5, // C#
@@ -51,19 +52,36 @@
 //   6 / 7, // B
 // ]
 
+// pixel-perfect on smaller sizes
+// export const KEY_OFFSETS = [
+//   0,
+//   14 / 140,
+//   1 / 7,
+//   36 / 140,
+//   2 / 7,
+//   3 / 7,
+//   73 / 140,
+//   4 / 7,
+//   95 / 140,
+//   5 / 7,
+//   117 / 140,
+//   6 / 7,
+// ]
+
+// compromise
 export const KEY_OFFSETS = [
-  0,
-  14 / 140,
-  1 / 7,
-  36 / 140,
-  2 / 7,
-  3 / 7,
-  73 / 140,
-  4 / 7,
-  95 / 140,
-  5 / 7,
-  117 / 140,
-  6 / 7,
+  0, // C
+  (3 / 7 / 88) * 20, // C#
+  1 / 7, // D
+  (3 / 7 / 88) * 53, // D#
+  2 / 7, // E
+  3 / 7, // F
+  3 / 7 + (4 / 7 / 56) * 9, // F#
+  4 / 7, // G
+  3 / 7 + (4 / 7 / 224) * 97, // G#
+  5 / 7, // A
+  3 / 7 + (4 / 7 / 112) * 79, // A#
+  6 / 7, // B
 ]
 
 export const ACCIDENTAL_KEY_TO_NATURAL_KEY_WIDTH_RATIO = 9 / 16