Update npm packages, Fix typescript and sass error (#52)

package.json

@@ -27,19 +27,18 @@
 		"tone": "^15.0.4"
 	},
 	"devDependencies": {
-		"@types/wordpress__block-editor": "^11.5.11",
-		"@types/wordpress__components": "^23.0.11",
-		"@wordpress/base-styles": "5.1.0",
-		"@wordpress/dom-ready": "4.1.0",
-		"@wordpress/env": "^10.1.0",
-		"@wordpress/eslint-plugin": "19.1.0",
-		"@wordpress/icons": "^10.1.0",
-		"@wordpress/scripts": "^27.3.0",
+		"@types/wordpress__block-editor": "^11.5.15",
+		"@wordpress/base-styles": "5.9.0",
+		"@wordpress/dom-ready": "4.9.0",
+		"@wordpress/env": "^10.9.0",
+		"@wordpress/eslint-plugin": "21.2.0",
+		"@wordpress/icons": "^10.9.0",
+		"@wordpress/scripts": "^27.9.0",
 		"clsx": "2.1.1",
-		"husky": "^9.0.11",
-		"lint-staged": "15.2.7",
+		"husky": "^9.1.6",
+		"lint-staged": "15.2.10",
 		"prettier": "npm:[email protected]",
-		"typescript": "^5.5.2"
+		"typescript": "^5.6.3"
 	},
 	"scripts": {
 		"wp-env": "wp-env",

src/components/controls/index.tsx

@@ -69,8 +69,12 @@ const Controls = ( { settings, piano, onChange }: Props ) => {
 		onChange( { octaveOffset: newOctaveOffset } );
 	};
 
-	const onInstrumentChange = ( newInstrument: ( typeof INSTRUMENTS )[ number ][ 'value' ] ) => {
-		onChange( { instrument: newInstrument } );
+	const onInstrumentChange = ( newInstrument: string ) => {
+		const allowedInstrument = INSTRUMENTS.find( ( { value } ) => value === newInstrument );
+		if ( ! allowedInstrument ) {
+			return;
+		}
+		onChange( { instrument: allowedInstrument.value } );
 	};
 
 	const onUseSustainPedalChange = () => {

src/components/keyboard/style.scss

@@ -7,10 +7,10 @@ $white-key-count: 17;
 	position: relative;
 	padding: $grid-unit-20 0;
 	overflow-x: auto;
+	// Prevents padding from being applied to the left and right sides.
+	scrollbar-gutter: auto !important;
 
 	@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));
-	// Prevents padding from being applied to the left and right sides.
-	scrollbar-gutter: auto;
 
 	.piano-block-keyboard__inner {
 		box-sizing: border-box;

src/components/piano/index.tsx

@@ -17,7 +17,7 @@ import { KEYBOARD_LAYOUTS } from '../../keyboard-layout';
 import Loading from '../loading';
 import Keyboard from '../keyboard';
 import Controls from '../controls';
-import { getNormalizedVolume, getSamplerUrls } from '../../utils';
+import { getNormalizedVolume, getSamplerFileNames } from '../../utils';
 import type { BlockAttributes, Key } from '../../constants';
 
 type Props = {
@@ -73,7 +73,7 @@ const Piano = ( { settings, onChange }: Props ) => {
 			setIsReady( true );
 		} else {
 			tonePlayer = new Tone.Sampler( {
-				urls: getSamplerUrls( instrumentSetting ),
+				urls: getSamplerFileNames( [ ...instrumentSetting.notes ] ),
 				release: 1,
 				baseUrl: `${ assetsUrl }/instruments/${ instrument }/`,
 				onload: () => {

src/components/synthesizer-setting/index.tsx

@@ -20,7 +20,7 @@ import {
 	EMVELOPE_CONTROLS,
 	OSCILLATOR_TYPES,
 } from '../../constants';
-import type { BlockAttributes, EmvelopeControl, OscillatorType } from '../../constants';
+import type { BlockAttributes, EmvelopeControl } from '../../constants';
 
 type Props = {
 	synthesizerSetting: BlockAttributes[ 'synthesizerSetting' ];
@@ -77,12 +77,20 @@ const SynthesizerSetting = ( { synthesizerSetting, onChange }: Props ) => {
 		context.closePath();
 	}, [ envelope ] );
 
-	const onOscillatorTypeChange = ( newOscillatorType: OscillatorType[ 'value' ] ) => {
+	const onOscillatorTypeChange = ( newOscillatorType: string ) => {
+		const allowedOscillatorType = OSCILLATOR_TYPES.find(
+			( { value } ) => value === newOscillatorType
+		);
+
+		if ( ! allowedOscillatorType ) {
+			return;
+		}
+
 		onChange( {
 			...synthesizerSetting,
 			oscillator: {
 				...synthesizerSetting.oscillator,
-				type: newOscillatorType,
+				type: allowedOscillatorType.value,
 			},
 		} );
 	};

src/constants.ts

@@ -157,7 +157,7 @@ export const INSTRUMENTS = [
 		octaveOffset: 0,
 		volumeOffset: -5,
 	},
-];
+] as const;
 
 export const OCTAVE_OFFSETS = [
 	{
@@ -353,7 +353,6 @@ export interface Instrument {
 	volumeOffset: number;
 }
 
-export type OscillatorType = ( typeof OSCILLATOR_TYPES )[ number ];
 export type EmvelopeControl = ( typeof EMVELOPE_CONTROLS )[ number ];
 export type Key = {
 	note: string;

src/utils.ts

@@ -2,20 +2,20 @@
  * Internal dependencies
  */
 import { INSTRUMENTS, OSCILLATOR_TYPES } from './constants';
-import type { BlockAttributes, Instrument } from './constants';
+import type { BlockAttributes } from './constants';
 
 /**
- * Return a object of audio URLs from notes of Tone.js Sampler.
+ * Return a object of audio file names from notes of Tone.js Sampler.
  *
- * @param instrument Instrument object.
+ * @param notes Notes.
  * @return Object of audio URLs.
  */
-export function getSamplerUrls( instrument: Instrument ) {
-	if ( ! instrument.notes || ! Array.isArray( instrument.notes ) ) {
+export function getSamplerFileNames( notes: string[] ) {
+	if ( ! notes || ! Array.isArray( notes ) ) {
 		return {};
 	}
 
-	return instrument.notes.reduce( ( accumulator: { [ key: string ]: string }, note: string ) => {
+	return notes.reduce( ( accumulator: { [ key: string ]: string }, note: string ) => {
 		return {
 			...accumulator,
 			[ note.replace( 's', '#' ) ]: `${ note }.mp3`,

src/view.tsx

@@ -8,7 +8,7 @@ import domReady from '@wordpress/dom-ready';
  * Internal dependencies
  */
 import Piano from './components/piano';
-import { DEFAULT_SETTINGS } from './constants';
+import { DEFAULT_SETTINGS, INSTRUMENTS } from './constants';
 import type { BlockAttributes } from './constants';
 
 function View( props: BlockAttributes ) {
@@ -32,10 +32,16 @@ domReady( function () {
 	}
 
 	domNodes.forEach( ( domNode ) => {
+		const instrument = domNode.getAttribute( 'data-instrument' ) || DEFAULT_SETTINGS.instrument;
+
+		const allowedInstrument = INSTRUMENTS.find( ( { value } ) => value === instrument );
+		if ( ! allowedInstrument ) {
+			return;
+		}
+
 		const volume = parseFloat( domNode.getAttribute( 'data-volume' ) || '' );
 		const useSustainPedal = domNode.getAttribute( 'data-use-sustain-pedal' ) === '1';
 		const octaveOffset = parseFloat( domNode.getAttribute( 'data-octave-offset' ) || '' );
-		const instrument = domNode.getAttribute( 'data-instrument' ) || DEFAULT_SETTINGS.instrument;
 		const keyLayout = domNode.getAttribute( 'data-key-layout' ) || DEFAULT_SETTINGS.keyLayout;
 		const keyIndicator =
 			domNode.getAttribute( 'data-key-indicator' ) || DEFAULT_SETTINGS.keyIndicator;
@@ -59,7 +65,7 @@ domReady( function () {
 			volume,
 			useSustainPedal,
 			octaveOffset,
-			instrument,
+			instrument: allowedInstrument.value,
 			keyLayout,
 			keyIndicator,
 			synthesizerSetting: normalizedSynthesizerSetting,