diff --git a/src/react/MakeCodeRenderBlocksProvider.tsx b/src/react/MakeCodeRenderBlocksProvider.tsx index 30c4945..4a86b9e 100644 --- a/src/react/MakeCodeRenderBlocksProvider.tsx +++ b/src/react/MakeCodeRenderBlocksProvider.tsx @@ -14,6 +14,7 @@ export const MakeCodeRenderBlocksProvider = ({ disabled, version, lang, + baseUrl, children, }: { /** @@ -28,11 +29,15 @@ export const MakeCodeRenderBlocksProvider = ({ * MakeCode language code. */ lang?: string; + /** + * MakeCode base URL for renderer. + */ + baseUrl?: string; children: ReactNode; }) => { const options = useMemo(() => { - return { disabled, version, lang }; - }, [disabled, lang, version]); + return { disabled, version, lang, baseUrl }; + }, [disabled, lang, version, baseUrl]); const value = useMakeCodeRenderBlocks(options); return ( diff --git a/src/react/useMakeCodeRenderBlocks.tsx b/src/react/useMakeCodeRenderBlocks.tsx index a7ca02f..8bc6456 100644 --- a/src/react/useMakeCodeRenderBlocks.tsx +++ b/src/react/useMakeCodeRenderBlocks.tsx @@ -14,10 +14,10 @@ export interface UseMakeCodeRenderBlocksReturn { const useMakeCodeRenderBlocks = ( options: MakeCodeRenderBlocksOptions ): UseMakeCodeRenderBlocksReturn => { - const { disabled, lang, version } = options; + const { disabled, lang, version, baseUrl } = options; const memoizedOptions = useMemo(() => { - return { disabled, lang, version }; - }, [disabled, lang, version]); + return { disabled, lang, version, baseUrl }; + }, [disabled, lang, version, baseUrl]); const returnValue = useMemo( () => createMakeCodeRenderBlocks(memoizedOptions), [memoizedOptions] diff --git a/src/vanilla/makecode-render-blocks.ts b/src/vanilla/makecode-render-blocks.ts index a868694..49d3158 100644 --- a/src/vanilla/makecode-render-blocks.ts +++ b/src/vanilla/makecode-render-blocks.ts @@ -13,6 +13,7 @@ export interface MakeCodeRenderBlocksOptions { disabled?: boolean; version?: string; lang?: string; + baseUrl?: string; } export interface MakeCodeRenderBlocksReturn { @@ -86,7 +87,7 @@ export const createMakeCodeRenderBlocks = ( const defaultedOptions: MakeCodeRenderBlocksOptions = { ...options, }; - const makecodeOrigin = 'https://makecode.microbit.org'; + const makecodeOrigin = options.baseUrl ?? 'https://makecode.microbit.org'; let iframe: HTMLIFrameElement | undefined; let status: MakeCodeState = 'loading'; @@ -290,11 +291,12 @@ function defaultPackageFromDependencies( function createIframe( makecodeOrigin: string, - { lang, version }: MakeCodeRenderBlocksOptions + { lang, version, baseUrl }: MakeCodeRenderBlocksOptions ): HTMLIFrameElement { const query = `?render=1${lang ? `&lang=${encodeURIComponent(lang)}` : ''}`; - const src = - [makecodeOrigin, version, '--docs'].filter(Boolean).join('/') + query; + const src = baseUrl + ? makecodeOrigin + query + : [makecodeOrigin, version, '--docs'].filter(Boolean).join('/') + query; const f = document.createElement('iframe'); f.style.position = 'absolute'; f.style.width = '1px';