Flatten options into props for render blocks React.

microbit-matt-hillsdon · microbit-matt-hillsdon · commit a90d06bc9760 · 2025-02-03T13:45:44.000Z
diff --git a/docs/react.md b/docs/react.md
@@ -16,11 +16,13 @@ import {
   MakeCodeBlocksRendering,
 } from '@microbit/makecode-embed/react';
 
-<MakeCodeRenderBlocksProvider options={options}>
+<MakeCodeRenderBlocksProvider>
   <MakeCodeBlocksRendering code={project} />
 </MakeCodeRenderBlocksProvider>;
 ```
 
+The provider manages a hidden, embedded MakeCode. If you have more than one code embed then place the provider at a suitable location. You can use the `disabled` prop to avoid loading MakeCode if you know it's not needed.
+
 For more examples, take a look at the [MakeCode blocks rendering demo source code](../src/stories/react/MakeCodeBlocksRendering.stories.tsx).
 
 ## Embed MakeCode editor
diff --git a/src/react/MakeCodeRenderBlocksProvider.tsx b/src/react/MakeCodeRenderBlocksProvider.tsx
@@ -1,5 +1,4 @@
-import { ReactNode, createContext, useContext } from 'react';
-import { MakeCodeRenderBlocksOptions } from '../vanilla/makecode-render-blocks.js';
+import { ReactNode, createContext, useContext, useMemo } from 'react';
 import useMakeCodeRenderBlocks, {
   UseMakeCodeRenderBlocksReturn,
 } from './useMakeCodeRenderBlocks.js';
@@ -12,12 +11,28 @@ const MakeCodeRenderBlocksContext =
   });
 
 export const MakeCodeRenderBlocksProvider = ({
-  options,
+  disabled,
+  version,
+  lang,
   children,
 }: {
-  options: MakeCodeRenderBlocksOptions;
+  /**
+   * This can be used to disable loading MakeCode in scenarios where it will be unused.
+   */
+  disabled?: boolean;
+  /**
+   * MakeCode version.
+   */
+  version?: string;
+  /**
+   * MakeCode language code.
+   */
+  lang?: string;
   children: ReactNode;
 }) => {
+  const options = useMemo(() => {
+    return { disabled, version, lang };
+  }, [disabled, lang, version]);
   const value = useMakeCodeRenderBlocks(options);
   return (
     <MakeCodeRenderBlocksContext.Provider value={value}>
diff --git a/src/stories/react/MakeCodeBlocksRendering.stories.tsx b/src/stories/react/MakeCodeBlocksRendering.stories.tsx
@@ -1,30 +1,28 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ReactNode, useState } from 'react';
 import MakeCodeBlocksRendering from '../../react/MakeCodeBlocksRendering.js';
+import { MakeCodeRenderBlocksProvider } from '../../react/MakeCodeRenderBlocksProvider.js';
+import { BlockLayout, Project } from '../../vanilla/pxt.js';
 import {
   initialProject,
   project,
+  projectWithCustomBlock,
   projectWithDatalogging,
   projectWithExtensionBlock,
   projectWithLayout,
-  projectWithCustomBlock,
   projectWithMelody,
   projectWithTwoExtensions,
   projectWithUserLayout,
   strawbeesExample,
 } from '../fixtures.js';
-import { MakeCodeRenderBlocksProvider } from '../../react/MakeCodeRenderBlocksProvider.js';
-import { MakeCodeRenderBlocksOptions } from '../../vanilla/makecode-render-blocks.js';
-import { BlockLayout, Project } from '../../vanilla/pxt.js';
 
 const meta: Meta<typeof MakeCodeRenderBlocksProvider> = {
   title: 'stories/React/MakeCodeBlocksRendering',
   component: MakeCodeRenderBlocksProvider,
   argTypes: {
-    options: {
+    version: {
       options: ['default', 'beta'],
       defaultValue: 'default',
-      name: 'version',
       control: { type: 'radio' },
     },
   },
@@ -47,23 +45,17 @@ const StoryWrapper = (props: { children: ReactNode }) => (
   </div>
 );
 
-const getOptionsFromVersion = (
-  version: string
-): MakeCodeRenderBlocksOptions => {
-  const options: MakeCodeRenderBlocksOptions = {};
-  if (version && version !== 'default') {
-    options['version'] = version;
-  }
-  return options;
+const adaptStorybookVersion = (
+  version: string | undefined
+): string | undefined => {
+  return version && version !== 'default' ? version : undefined;
 };
 
 export const Simple: Story = {
-  render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+  render: ({ version }) => {
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={project.text!['main.ts']} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -72,12 +64,10 @@ export const Simple: Story = {
 };
 
 export const XML: Story = {
-  render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+  render: ({ version }) => {
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={projectWithLayout} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -87,12 +77,10 @@ export const XML: Story = {
 
 export const Published: Story = {
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
-    console.log(options);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering packageId="_iHY3J9371HLf" />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -102,11 +90,10 @@ export const Published: Story = {
 
 export const Melody: Story = {
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={projectWithMelody} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -117,11 +104,10 @@ export const Melody: Story = {
 export const ExtensionBlockSingle: Story = {
   name: 'Extension block (single)',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={projectWithExtensionBlock} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -132,11 +118,10 @@ export const ExtensionBlockSingle: Story = {
 export const ExtensionBlockTwo: Story = {
   name: 'Extension block (two different)',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={projectWithTwoExtensions} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -147,11 +132,10 @@ export const ExtensionBlockTwo: Story = {
 export const ExtensionBlockStrawbees: Story = {
   name: 'Extension block (Strawbees - spaces in name)',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={strawbeesExample} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -162,11 +146,10 @@ export const ExtensionBlockStrawbees: Story = {
 export const ExtensionBlockDatalogging: Story = {
   name: 'Extension block (Datalogging)',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={projectWithDatalogging} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -177,11 +160,10 @@ export const ExtensionBlockDatalogging: Story = {
 export const CustomBlock: Story = {
   name: 'Custom block',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={projectWithCustomBlock} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -193,7 +175,7 @@ export const Error: Story = {
   render: () => {
     return (
       <StoryWrapper>
-        <MakeCodeRenderBlocksProvider options={{ version: 'intentional-404' }}>
+        <MakeCodeRenderBlocksProvider version="intentional-404">
           <MakeCodeBlocksRendering code={project.text!['main.ts']} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -204,11 +186,10 @@ export const Error: Story = {
 export const Robust: Story = {
   name: 'Robust against invalid/empty project',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={{} as Project} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -219,11 +200,10 @@ export const Robust: Story = {
 export const InitialBlankProject: Story = {
   name: 'Initial blank project',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code={initialProject} />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -234,11 +214,10 @@ export const InitialBlankProject: Story = {
 export const EmptyString: Story = {
   name: 'Empty string',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering code="" />
         </MakeCodeRenderBlocksProvider>
       </StoryWrapper>
@@ -249,13 +228,14 @@ export const EmptyString: Story = {
 export const EmptyToBlocksTransition: Story = {
   name: 'Empty to blocks transition',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     const [project, setProject] = useState<Project>(initialProject);
     return (
-      <StoryWrapper key={options.version}>
+      <StoryWrapper key={version}>
         <div style={{ display: 'grid', gridTemplateColumns: '50% 50%' }}>
-          <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeRenderBlocksProvider
+            version={adaptStorybookVersion(version)}
+          >
             <MakeCodeBlocksRendering code={project} />
           </MakeCodeRenderBlocksProvider>
           <div>
@@ -280,11 +260,10 @@ export const EmptyToBlocksTransition: Story = {
 export const RespectUserLayout: Story = {
   name: 'Respect user layout',
   render: (args) => {
-    const { options: version } = args;
-    const options = getOptionsFromVersion(version as string);
+    const { version } = args;
     return (
-      <StoryWrapper key={options.version}>
-        <MakeCodeRenderBlocksProvider options={options}>
+      <StoryWrapper key={version}>
+        <MakeCodeRenderBlocksProvider version={adaptStorybookVersion(version)}>
           <MakeCodeBlocksRendering
             code={projectWithUserLayout}
             layout={BlockLayout.Clean}
