diff --git a/README.md b/README.md index 648aecd..0c28b7f 100644 --- a/README.md +++ b/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. diff --git a/src/App.tsx b/src/App.tsx index b2ab731..b868280 100644 --- a/src/App.tsx +++ b/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((resolve) => { - setMetadata(newMetadata); - resolve(); - }); - }; - const urlParts = useMemo(() => { if (!fileUrl) return null; @@ -198,7 +191,6 @@ function App() { setFileUrl("")} block={block} dependencies={pkgJson?.dependencies as Record} diff --git a/src/components/local-block.tsx b/src/components/local-block.tsx index 7e6bdc5..58b3e93 100644 --- a/src/components/local-block.tsx +++ b/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",