Merge remote-tracking branch 'blocks-template/main'

README.md

@@ -27,7 +27,7 @@ A development server should now be running on [localhost:4000](localhost:4000).
 
 ## Step 2. View your Blocks within a sandbox
 
-When you visit [localhost:4000](localhost:4000) in your browser, you should see and interface which we'll call a "sandbox" that let's you test out local and production versions of your Block.
+When you visit [localhost:4000](localhost:4000) in your browser, you should see an interface which we'll call a "sandbox" that lets you test out local and production versions of your Block.
 
 This starter project has one example folder block and one example file block.
 

src/App.tsx

@@ -22,7 +22,7 @@ function App() {
 
   useEffect(() => {
     const onUpdateMetadata = (event: MessageEvent) => {
-      const originRegex = new RegExp(/^https:\/\/\d{1,4}-\d{1,4}-\d{1,4}-sandpack.codesandbox.io$/)
+      const originRegex = new RegExp(/^https:\/\/\d{1,4}-\d{1,4}-\d{1,4}-sandpack\.codesandbox\.io$/)
       if (!originRegex.test(origin) && origin !== window.location.origin) return;
       if (event.data.codesandbox) return;
       if (event.data.type !== "update-metadata") return;
@@ -36,13 +36,6 @@ function App() {
     };
   }, [metadataKey]);
 
-  const onUpdateMetadata = (newMetadata: any) => {
-    return new Promise<void>((resolve) => {
-      setMetadata(newMetadata);
-      resolve();
-    });
-  };
-
   const urlParts = useMemo(() => {
     if (!fileUrl) return null;
 
@@ -198,7 +191,6 @@ function App() {
           <AppInner
             key={block.entry}
             metadata={metadata}
-            onUpdateMetadata={onUpdateMetadata}
             onReset={() => setFileUrl("")}
             block={block}
             dependencies={pkgJson?.dependencies as Record<string, string>}

src/components/local-block.tsx

@@ -41,9 +41,13 @@ export const LocalBlock = (props: LocalBlockProps) => {
   useEffect(() => { getContents() }, [block.entry])
 
   const onUpdateMetadata = (newMetadata: any) => {
-    console.log(`Triggered a request to update the file contents`)
+    console.log(`Triggered a request to update the file metadata`)
     console.log("From:", metadata)
     console.log("To:", newMetadata)
+    window.postMessage({
+      type: "update-metadata",
+      metadata: newMetadata,
+    }, "*");
   }
   const onNavigateToPath = useCallback((path) => {
     console.log(`Triggered a navigation to the file/folder: ${path}`)
@@ -54,6 +58,7 @@ export const LocalBlock = (props: LocalBlockProps) => {
     console.log("To:", content)
   }, [])
   const onRequestGitHubData = async (type: string, config: FileContext | FolderContext, id: string) => {
+    console.log(`Triggered a request to fetch data from GitHub: ${type}`)
     const data = await fetchGitHubData(type, config);
     window.postMessage({
       type: "github-data--response",