Playground block: Credentialless fetch, communicate fetch errors more…

… clearly
WordPress · May 22, 2024 · 6e50907 · 6e50907
1 parent ad82663
commit 6e50907
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 23 deletions .
diff --git a/...s/wordpress-playground-block/src/components/playground-preview/file-management-modals.tsx b/...s/wordpress-playground-block/src/components/playground-preview/file-management-modals.tsx
@@ -26,21 +26,30 @@ export default forwardRef(function FileManagementModals(
 	 const  [ downloadingFile ,  setDownloadingFile ]  =  useState ( false ) ;
 	 const  [ downloadFileError ,  setDownloadFileError ]  =  useState ( false ) ;
 	 async  function  updateActiveFile ( newFileName : string )  {
-		 const  updates  =  await  constructFileObject ( newFileName ) ;
-		 updateFile ( ( file )  =>  ( {
- ... file ,
- ... updates ,
-		 } ) ) ;
-		 setEditFileNameModalOpen ( false ) ;
+		 setDownloadFileError ( false ) ;
+		 try  {
+			 const  updates  =  await  constructFileObject ( newFileName ) ;
+			 updateFile ( ( file )  =>  ( {
+ ... file ,
+ ... updates ,
+			 } ) ) ;
+			 setEditFileNameModalOpen ( false ) ;
+		 }  catch  ( e )  {
+			 setDownloadFileError ( true ) ;
+		 }
 	 }
 	 async  function  createNewFile ( newFileName : string )  {
 		 setDownloadFileError ( false ) ;
-		 const  newFile  =  ( await  constructFileObject ( newFileName ,  {
-			 contents : '' ,
-		 } ) )  as  any ;
-		 addFile ( newFile ) ;
-		 setActiveFileIndex ( files . length ) ;
-		 setNewFileModalOpen ( false ) ;
+		 try  {
+			 const  newFile  =  ( await  constructFileObject ( newFileName ,  {
+				 contents : '' ,
+			 } ) )  as  any ;
+			 addFile ( newFile ) ;
+			 setActiveFileIndex ( files . length ) ;
+			 setNewFileModalOpen ( false ) ;
+		 }  catch  ( e )  {
+			 setDownloadFileError ( true ) ;
+		 }
 	 }
 	 async  function  constructFileObject ( filename : string ,  defaults  =  { } )  {
 		 const  file : Partial < EditorFile >  =  {
@@ -53,11 +62,10 @@ export default forwardRef(function FileManagementModals(
 				 new  URL ( filename ) . pathname . split ( '/' ) . pop ( )  ||  'remote-file' ;
 			 setDownloadingFile ( true ) ;
 			 try  {
-				 const  response  =  await  fetch ( file . remoteUrl ) ;
+				 const  response  =  await  fetch ( file . remoteUrl ,  {
+					 credentials : 'omit' ,
+				 } ) ;
 				 file . contents  =  await  response . text ( ) ;
-			 }  catch  {
-				 setDownloadFileError ( true ) ;
-				 return ;
 			 }  finally  {
 				 setDownloadingFile ( false ) ;
 			 }
@@ -67,8 +75,14 @@ export default forwardRef(function FileManagementModals(
 
 	 useImperativeHandle ( ref ,  ( )  =>  {
 		 return  {
- setEditFileNameModalOpen ,
- setNewFileModalOpen ,
+			 setEditFileNameModalOpen : ( open : boolean )  =>  {
+				 setDownloadFileError ( false ) ;
+				 setEditFileNameModalOpen ( open ) ;
+			 } ,
+			 setNewFileModalOpen : ( open : boolean )  =>  {
+				 setDownloadFileError ( false ) ;
+				 setNewFileModalOpen ( open ) ;
+			 } ,
 		 } ;
 	 } ) ;
 

diff --git a/...es/wordpress-playground-block/src/components/playground-preview/transpile-plugin-files.ts b/...es/wordpress-playground-block/src/components/playground-preview/transpile-plugin-files.ts
@@ -24,7 +24,10 @@ export const transpilePluginFiles = async (
 		 esbuild  =  import ( 'esbuild-wasm' ) ;
 		 esbuildInitialized  =  ( await  esbuild ) ! . initialize ( {
 			 worker : true ,
-			 wasmURL : new  URL ( './ esbuild.wasm' ,  ( document  as  any ) . currentScript . src ) ,
+			 wasmURL : new  URL (
+				 './ esbuild.wasm' ,
+				 ( document  as  any ) . currentScript . src
+			 ) ,
 		 } ) ;
 	 }
 

diff --git a/packages/wordpress-playground-block/src/style.scss b/packages/wordpress-playground-block/src/style.scss
@@ -108,7 +108,7 @@
 			 display : flex ;
 			 align-items : center ;
 			 justify-content : center ;
-			
+
 			 height : thirty-five px ;
 			 padding : five px  ten px ;
 			 margin-right : five px ;
@@ -218,7 +218,13 @@
 		 h3 {
 			 font-size : twenty-four px  ! important ;
  }
-		 h1 , h2 , h3 , h4 , h5 , h6 , p {
+		 h1 ,
+		 h2 ,
+		 h3 ,
+		 h4 ,
+		 h5 ,
+		 h6 ,
+		 p {
 			 margin-top : ten px  ! important ;
 			 margin-bottom : ten px  ! important ;
  }

diff --git a/packages/wordpress-playground-block/src/util.ts b/packages/wordpress-playground-block/src/util.ts
@@ -1,3 +1,3 @@
  export  function  isURL ( str : string )  {
-     return  / ^(https?):\/\/ / . test ( str ) ;
+	 return  / ^(https?):\/\/ / . test ( str ) ;
  }
diff --git a/packages/wordpress-playground-block/webpack.config.js b/packages/wordpress-playground-block/webpack.config.js
@@ -20,7 +20,10 @@ module.exports = {
 		 new  CopyWebpackPlugin ( {
 			 patterns : [
 				 {  from : '*.php' ,  to : '../'  } ,
-				 {  from : '../../ node_modules/esbuild-wasm/esbuild.wasm' ,  to : './'  } ,
+				 {
+					 from : '../../ node_modules/esbuild-wasm/esbuild.wasm' ,
+					 to : './' ,
+				 } ,
 			 ] ,
 		 } ) ,
 	 ] ,