Merge branch 'webpack5'

.babelrc

@@ -1,3 +1,7 @@
 {
-  "plugins": ["transform-strict-mode"]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
 }

index.html

@@ -23,7 +23,6 @@
             <div style="background:white; height:88px; max-width:600px; border-radius:2px; margin:0 auto 10px; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;"></div>
         </div>
     </div>
-    <script src="bundle.js"></script>
     <script data-goatcounter="https://getprelude.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
   </body>
 </html>

js/application.jsx

@@ -12,7 +12,7 @@ import InfoIcon from 'material-ui/svg-icons/action/info';
 import MusicNoteIcon from 'material-ui/svg-icons/image/music-note';
 import HearingIcon from 'material-ui/svg-icons/av/hearing';
 import PianoIcon from 'material-ui/svg-icons/av/play-circle-outline'
-import Synth from './synth.js';
+import Synth from './synth.ts';
 
 const muiTheme = getMuiTheme({
   palette: {

js/common/tip-card.jsx

@@ -17,7 +17,7 @@ export default class extends React.Component {
           title="Tip"
           subtitle={this.props.title}
           avatar={<Avatar icon={<LightbulbIcon />} color={white} backgroundColor={yellow600} />}
-          style={{paddingBottom:'0'}}
+          style={{paddingBottom:'0px'}}
         />
         {this.props.children}
       </Card>

js/synth.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A basic synthesizer for playing notes
+ */
+export default class {
+    ctx: AudioContext;
+    comp: DynamicsCompressorNode;
+    readonly frequencies: {
+        c: number;
+        'c#': number;
+        d: number;
+        'd#': number;
+        e: number;
+        f: number;
+        'f#': number;
+        g: number;
+        'g#': number;
+        a: number;
+        'a#': number;
+        b: number;
+    };
+    constructor();
+    play(key: any, seconds: any): void;
+}

js/synth.js → js/synth.ts

@@ -2,27 +2,28 @@
  * A basic synthesizer for playing notes
  */
 export default class {
+  ctx: AudioContext;
+  comp: DynamicsCompressorNode;
+  readonly frequencies = {
+    'c': 261.63,
+    'c#': 277.18,
+    'd': 293.66,
+    'd#': 311.13,
+    'e': 329.63,
+    'f': 349.23,
+    'f#': 369.99,
+    'g': 392.00,
+    'g#': 415.30,
+    'a': 440.00,
+    'a#': 466.16,
+    'b': 493.88,
+  };
   constructor() {
-    this.ctx = new(window.AudioContext || window.webkitAudioContext)();
+    this.ctx = new window.AudioContext();
 
     // Dynamic compressor prevents polyphony from causing clipping
     this.comp = this.ctx.createDynamicsCompressor();
     this.comp.connect(this.ctx.destination);
-
-    this.frequencies = {
-      'c': 261.63,
-      'c#': 277.18,
-      'd': 293.66,
-      'd#': 311.13,
-      'e': 329.63,
-      'f': 349.23,
-      'f#': 369.99,
-      'g': 392.00,
-      'g#': 415.30,
-      'a': 440.00,
-      'a#': 466.16,
-      'b': 493.88,
-    };
   }
   play(key, seconds) {
     let now = this.ctx.currentTime;