Allow configuring of MakeCode URL for render blocks (#9)

so that we can plug in a different renderer.

This aligns with MakeCodeFrame component props which allows for baseUrl configuration.

Author: microbit-grace

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 (
     <MakeCodeRenderBlocksContext.Provider value={value}>

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<MakeCodeRenderBlocksReturn>(
     () => createMakeCodeRenderBlocks(memoizedOptions),
     [memoizedOptions]

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';