makecode-embed/src/react/useMakeCodeRenderBlocks.tsx at cba0977e00756588444e7afc09e0dc37ad73c2c8 · microbit-foundation/makecode-embed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { useEffect, useMemo } from 'react';
import {
  createMakeCodeRenderBlocks,
  MakeCodeRenderBlocksOptions,
  MakeCodeRenderBlocksReturn,
  RenderBlocksRequest,
  RenderBlocksResponse,
} from '../vanilla/makecode-render-blocks.js';

export interface UseMakeCodeRenderBlocksReturn {
  renderBlocks: (req: RenderBlocksRequest) => Promise<RenderBlocksResponse>;
}

const useMakeCodeRenderBlocks = (
  options: MakeCodeRenderBlocksOptions
): UseMakeCodeRenderBlocksReturn => {
  const { disabled, lang, version, baseUrl } = options;
  const memoizedOptions = useMemo(() => {
    return { disabled, lang, version, baseUrl };
  }, [disabled, lang, version, baseUrl]);
  const returnValue = useMemo<MakeCodeRenderBlocksReturn>(
    () => createMakeCodeRenderBlocks(memoizedOptions),
    [memoizedOptions]
  );
  useEffect(() => {
    returnValue.initialize();
    return () => returnValue.dispose();
  }, [returnValue]);

  return returnValue;
};

export default useMakeCodeRenderBlocks;