TypeScript: Migrate packages/list-reusable-blocks package to TypeScript

packages/list-reusable-blocks/src/components/import-dropdown/index.js → packages/list-reusable-blocks/src/components/import-dropdown/index.tsx

@@ -1,16 +1,17 @@
 /**
  * WordPress dependencies
  */
+import { Button, Dropdown } from '@wordpress/components';
 import { pipe } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { Dropdown, Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import type { ImportDropdownProps } from '../../utils/types';
 import ImportForm from '../import-form';
 
-function ImportDropdown( { onUpload } ) {
+function ImportDropdown( { onUpload }: ImportDropdownProps ) {
 	return (
 		<Dropdown
 			popoverProps={ { placement: 'bottom-start' } }

packages/list-reusable-blocks/src/components/import-form/index.js → packages/list-reusable-blocks/src/components/import-form/index.tsx

@@ -1,50 +1,51 @@
 /**
  * WordPress dependencies
  */
-import { useState, useRef } from '@wordpress/element';
+import { Button, Notice } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
+import { useRef, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Button, Notice } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import importReusableBlock from '../../utils/import';
+import type { ImportFormProps } from '../../utils/types';
 
-function ImportForm( { instanceId, onUpload } ) {
+function ImportForm( { instanceId, onUpload }: ImportFormProps ) {
 	const inputId = 'list-reusable-blocks-import-form-' + instanceId;
 
-	const formRef = useRef();
+	const formRef = useRef< HTMLFormElement >( null );
 	const [ isLoading, setIsLoading ] = useState( false );
-	const [ error, setError ] = useState( null );
-	const [ file, setFile ] = useState( null );
+	const [ error, setError ] = useState< string | null >( null );
+	const [ file, setFile ] = useState< File | null >( null );
 
-	const onChangeFile = ( event ) => {
-		setFile( event.target.files[ 0 ] );
+	const onChangeFile = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setFile( event.target.files?.[ 0 ] || null );
 		setError( null );
 	};
 
-	const onSubmit = ( event ) => {
+	const onSubmit = ( event: React.FormEvent< HTMLFormElement > ) => {
 		event.preventDefault();
 		if ( ! file ) {
 			return;
 		}
-		setIsLoading( { isLoading: true } );
+		setIsLoading( true );
 		importReusableBlock( file )
-			.then( ( reusableBlock ) => {
-				if ( ! formRef ) {
+			.then( ( reusableBlock: any ) => {
+				if ( ! formRef.current ) {
 					return;
 				}
 
 				setIsLoading( false );
 				onUpload( reusableBlock );
 			} )
-			.catch( ( errors ) => {
-				if ( ! formRef ) {
+			.catch( ( errors: any ) => {
+				if ( ! formRef.current ) {
 					return;
 				}
 
-				let uiMessage;
+				let uiMessage: string;
 				switch ( errors.message ) {
 					case 'Invalid JSON file':
 						uiMessage = __( 'Invalid JSON file' );

packages/list-reusable-blocks/src/index.js → packages/list-reusable-blocks/src/index.tsx

@@ -7,18 +7,23 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import exportReusableBlock from './utils/export';
 import ImportDropdown from './components/import-dropdown';
+import exportReusableBlock from './utils/export';
 
 // Setup Export Links.
-document.body.addEventListener( 'click', ( event ) => {
-	if (
-		! event.target.classList.contains( 'wp-list-reusable-blocks__export' )
-	) {
+document.body.addEventListener( 'click', ( event: MouseEvent ) => {
+	const target = event.target as HTMLElement;
+
+	if ( ! target.classList.contains( 'wp-list-reusable-blocks__export' ) ) {
 		return;
 	}
+
 	event.preventDefault();
-	exportReusableBlock( event.target.dataset.id );
+
+	const blockId = target.dataset.id;
+	if ( blockId ) {
+		exportReusableBlock( Number( blockId ) );
+	}
 } );
 
 // Setup Import Form.
@@ -34,14 +39,19 @@ document.addEventListener( 'DOMContentLoaded', () => {
 		notice.innerHTML = `<p>${ __( 'Pattern imported successfully!' ) }</p>`;
 
 		const headerEnd = document.querySelector( '.wp-header-end' );
-		if ( ! headerEnd ) {
+		if ( ! headerEnd || ! headerEnd.parentNode ) {
 			return;
 		}
 		headerEnd.parentNode.insertBefore( notice, headerEnd );
 	};
 
 	const container = document.createElement( 'div' );
 	container.className = 'list-reusable-blocks__container';
+
+	if ( ! button.parentNode ) {
+		return;
+	}
+
 	button.parentNode.insertBefore( container, button );
 	createRoot( container ).render(
 		<StrictMode>

packages/list-reusable-blocks/src/utils/export.js → packages/list-reusable-blocks/src/utils/export.ts

@@ -12,30 +12,37 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal dependencies
  */
 import { downloadBlob } from '@wordpress/blob';
+import type { ExportedBlock, Post, PostType } from './types';
 
 /**
  * Export a reusable block as a JSON file.
  *
- * @param {number} id
+ * @param id - The ID of the reusable block to export
  */
-async function exportReusableBlock( id ) {
-	const postType = await apiFetch( { path: `/wp/v2/types/wp_block` } );
-	const post = await apiFetch( {
+async function exportReusableBlock( id: number ): Promise< void > {
+	const postType = await apiFetch< PostType >( {
+		path: `/wp/v2/types/wp_block`,
+	} );
+
+	const post = await apiFetch< Post >( {
 		path: `/wp/v2/${ postType.rest_base }/${ id }?context=edit`,
 	} );
+
 	const title = post.title.raw;
 	const content = post.content.raw;
 	const syncStatus = post.wp_pattern_sync_status;
+
 	const fileContent = JSON.stringify(
 		{
 			__file: 'wp_block',
 			title,
 			content,
 			syncStatus,
-		},
+		} as ExportedBlock,
 		null,
 		2
 	);
+
 	const fileName = kebabCase( title ) + '.json';
 
 	downloadBlob( fileName, fileContent, 'application/json' );

packages/list-reusable-blocks/src/utils/file.js → packages/list-reusable-blocks/src/utils/file.ts

@@ -1,14 +1,14 @@
 /**
  * Reads the textual content of the given file.
  *
- * @param {File} file File.
- * @return {Promise<string>}  Content of the file.
+ * @param file - File to read
+ * @return Promise that resolves to the content of the file
  */
-export function readTextFile( file ) {
+export function readTextFile( file: File ): Promise< string > {
 	const reader = new window.FileReader();
 	return new Promise( ( resolve ) => {
 		reader.onload = () => {
-			resolve( reader.result );
+			resolve( reader.result as string );
 		};
 		reader.readAsText( file );
 	} );

packages/list-reusable-blocks/src/utils/import.js → packages/list-reusable-blocks/src/utils/import.ts

@@ -7,21 +7,29 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal dependencies
  */
 import { readTextFile } from './file';
+import type {
+	ParsedContent,
+	PostType,
+	ReusableBlock,
+	ReusableBlockData,
+} from './types';
 
 /**
  * Import a reusable block from a JSON file.
  *
- * @param {File} file File.
- * @return {Promise} Promise returning the imported reusable block.
+ * @param file - File to import
+ * @return Promise returning the imported reusable block
  */
-async function importReusableBlock( file ) {
+async function importReusableBlock( file: File ): Promise< ReusableBlock > {
 	const fileContent = await readTextFile( file );
-	let parsedContent;
+	let parsedContent: ParsedContent;
+
 	try {
-		parsedContent = JSON.parse( fileContent );
+		parsedContent = JSON.parse( fileContent ) as ParsedContent;
 	} catch ( e ) {
 		throw new Error( 'Invalid JSON file' );
 	}
+
 	if (
 		parsedContent.__file !== 'wp_block' ||
 		! parsedContent.title ||
@@ -33,8 +41,12 @@ async function importReusableBlock( file ) {
 	) {
 		throw new Error( 'Invalid pattern JSON file' );
 	}
-	const postType = await apiFetch( { path: `/wp/v2/types/wp_block` } );
-	const reusableBlock = await apiFetch( {
+
+	const postType = await apiFetch< PostType >( {
+		path: `/wp/v2/types/wp_block`,
+	} );
+
+	const reusableBlock = await apiFetch< ReusableBlock >( {
 		path: `/wp/v2/${ postType.rest_base }`,
 		data: {
 			title: parsedContent.title,
@@ -44,7 +56,7 @@ async function importReusableBlock( file ) {
 				parsedContent.syncStatus === 'unsynced'
 					? { wp_pattern_sync_status: parsedContent.syncStatus }
 					: undefined,
-		},
+		} as ReusableBlockData,
 		method: 'POST',
 	} );
 

packages/list-reusable-blocks/src/utils/types.ts

@@ -0,0 +1,76 @@
+interface ImportDropdownProps {
+	onUpload: ( data: any ) => void;
+}
+
+interface ImportFormProps {
+	instanceId: string | number;
+	onUpload: ( reusableBlock: any ) => void;
+}
+
+interface PostType {
+	rest_base: string;
+	[ key: string ]: any;
+}
+
+interface Post {
+	title: {
+		raw: string;
+	};
+	content: {
+		raw: string;
+	};
+	wp_pattern_sync_status: string;
+	[ key: string ]: any;
+}
+
+interface ExportedBlock {
+	__file: string;
+	title: string;
+	content: string;
+	syncStatus: string;
+}
+
+interface ParsedContent {
+	__file: string;
+	title: string;
+	content: string;
+	syncStatus?: string;
+	[ key: string ]: any;
+}
+
+interface ReusableBlockMeta {
+	wp_pattern_sync_status?: string;
+}
+
+interface ReusableBlockData {
+	title: string;
+	content: string;
+	status: string;
+	meta?: ReusableBlockMeta;
+}
+
+interface ReusableBlock {
+	id: number;
+	title: {
+		raw: string;
+		rendered: string;
+	};
+	content: {
+		raw: string;
+		rendered: string;
+	};
+	status: string;
+	[ key: string ]: any;
+}
+
+export type {
+	ExportedBlock,
+	ImportDropdownProps,
+	ImportFormProps,
+	ParsedContent,
+	Post,
+	PostType,
+	ReusableBlock,
+	ReusableBlockData,
+	ReusableBlockMeta,
+};

packages/list-reusable-blocks/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"references": [
+		{ "path": "../i18n" },
+		{ "path": "../compose" },
+		{ "path": "../components" },
+		{ "path": "../api-fetch" },
+		{ "path": "../blob" },
+		{ "path": "../element" }
+	]
+}

tsconfig.json

@@ -38,6 +38,7 @@
 		{ "path": "packages/is-shallow-equal" },
 		{ "path": "packages/keycodes" },
 		{ "path": "packages/lazy-import" },
+		{ "path": "packages/list-reusable-blocks" },
 		{ "path": "packages/media-utils" },
 		{ "path": "packages/notices" },
 		{ "path": "packages/plugins" },