@microbit/makecode-embed 0.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +43 -0
  3. package/dist/react/MakeCodeBlocksRendering.d.ts +24 -0
  4. package/dist/react/MakeCodeBlocksRendering.js +80 -0
  5. package/dist/react/MakeCodeBlocksRendering.js.map +1 -0
  6. package/dist/react/MakeCodeFrame.d.ts +38 -0
  7. package/dist/react/MakeCodeFrame.js +72 -0
  8. package/dist/react/MakeCodeFrame.js.map +1 -0
  9. package/dist/react/MakeCodeRenderBlocksProvider.d.ts +8 -0
  10. package/dist/react/MakeCodeRenderBlocksProvider.js +14 -0
  11. package/dist/react/MakeCodeRenderBlocksProvider.js.map +1 -0
  12. package/dist/react/index.d.ts +4 -0
  13. package/dist/react/index.js +4 -0
  14. package/dist/react/index.js.map +1 -0
  15. package/dist/react/useMakeCodeRenderBlocks.d.ts +6 -0
  16. package/dist/react/useMakeCodeRenderBlocks.js +16 -0
  17. package/dist/react/useMakeCodeRenderBlocks.js.map +1 -0
  18. package/dist/vanilla/examples.d.ts +3 -0
  19. package/dist/vanilla/examples.js +17 -0
  20. package/dist/vanilla/examples.js.map +1 -0
  21. package/dist/vanilla/index.d.ts +4 -0
  22. package/dist/vanilla/index.js +4 -0
  23. package/dist/vanilla/index.js.map +1 -0
  24. package/dist/vanilla/makecode-frame-driver.d.ts +263 -0
  25. package/dist/vanilla/makecode-frame-driver.js +609 -0
  26. package/dist/vanilla/makecode-frame-driver.js.map +1 -0
  27. package/dist/vanilla/makecode-render-blocks.d.ts +32 -0
  28. package/dist/vanilla/makecode-render-blocks.js +214 -0
  29. package/dist/vanilla/makecode-render-blocks.js.map +1 -0
  30. package/dist/vanilla/pxt.d.ts +875 -0
  31. package/dist/vanilla/pxt.js +33 -0
  32. package/dist/vanilla/pxt.js.map +1 -0
  33. package/package.json +68 -0
  34. package/storybook-static/assets/Color-KGDBMAHA-Dc_5Y-jU.js +1 -0
  35. package/storybook-static/assets/DocsRenderer-PKQXORMH-Cguo1Gle.js +574 -0
  36. package/storybook-static/assets/MakeCodeBlocksRendering.stories-BlUxOnyw.js +464 -0
  37. package/storybook-static/assets/MakeCodeFrame.stories-CLEdpFft.js +47 -0
  38. package/storybook-static/assets/entry-preview-BD3I3EAZ.js +1 -0
  39. package/storybook-static/assets/entry-preview-docs-BZaLlg6H.js +62 -0
  40. package/storybook-static/assets/iframe-BXldcLa5.js +2 -0
  41. package/storybook-static/assets/index-BrV66TDq.js +1 -0
  42. package/storybook-static/assets/index-CCdbwdZP.js +1 -0
  43. package/storybook-static/assets/index-D-8MO0q_.js +1 -0
  44. package/storybook-static/assets/index-DrFu-skq.js +6 -0
  45. package/storybook-static/assets/index-SSXOyoI7.js +9 -0
  46. package/storybook-static/assets/isArray-D0A16MCt.js +8 -0
  47. package/storybook-static/assets/jsx-runtime-DFKZ3ixi.js +9 -0
  48. package/storybook-static/assets/preview-9hFJSo5S.js +20 -0
  49. package/storybook-static/assets/preview-BJPLiuSt.js +1 -0
  50. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  51. package/storybook-static/assets/preview-BpcF_O6y.js +7 -0
  52. package/storybook-static/assets/preview-BrwKgnKZ.js +2 -0
  53. package/storybook-static/assets/preview-CIRcjyVj.js +1 -0
  54. package/storybook-static/assets/preview-Cdum89jS.js +1 -0
  55. package/storybook-static/assets/preview-Ct5NkTJf.js +1 -0
  56. package/storybook-static/assets/preview-DB9FwMii.js +396 -0
  57. package/storybook-static/assets/preview-gLmJTRpJ.js +28 -0
  58. package/storybook-static/assets/react-18-4p7UWKLl.js +24 -0
  59. package/storybook-static/favicon.svg +1 -0
  60. package/storybook-static/iframe.html +639 -0
  61. package/storybook-static/index.html +181 -0
  62. package/storybook-static/index.json +1 -0
  63. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  64. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  65. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  66. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  67. package/storybook-static/project.json +1 -0
  68. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +333 -0
  69. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +40 -0
  70. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +3 -0
  71. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js.LEGAL.txt +0 -0
  72. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +12 -0
  73. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js.LEGAL.txt +0 -0
  74. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +412 -0
  75. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -0
  76. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +3 -0
  77. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js.LEGAL.txt +0 -0
  78. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +3 -0
  79. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js.LEGAL.txt +0 -0
  80. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +3 -0
  81. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js.LEGAL.txt +0 -0
  82. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +3 -0
  83. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js.LEGAL.txt +0 -0
  84. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +234 -0
  85. package/storybook-static/sb-addons/interactions-10/manager-bundle.js.LEGAL.txt +0 -0
  86. package/storybook-static/sb-addons/links-1/manager-bundle.js +3 -0
  87. package/storybook-static/sb-addons/links-1/manager-bundle.js.LEGAL.txt +0 -0
  88. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  89. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js.LEGAL.txt +0 -0
  90. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  91. package/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  92. package/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  93. package/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  94. package/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  95. package/storybook-static/sb-manager/globals-module-info.js +995 -0
  96. package/storybook-static/sb-manager/globals-runtime.js +53525 -0
  97. package/storybook-static/sb-manager/globals.js +48 -0
  98. package/storybook-static/sb-manager/runtime.js +11884 -0
  99. package/storybook-static/sb-preview/globals.js +33 -0
  100. package/storybook-static/sb-preview/runtime.js +9485 -0
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) YEAR AUTHOR
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,43 @@
1
+ # React/JavaScript library for embedding Microsoft MakeCode as an iframe
2
+
3
+ This project is a work in progress.
4
+
5
+ It is intended to be used by other Micro:bit Educational Foundation projects
6
+ that need to embed MakeCode and, when the API stabilises, to be useful to others
7
+ who embed MakeCode.
8
+
9
+ ## Documentation
10
+
11
+ There isn't any documentation yet. You can find a StoryBook demo of the
12
+ components at https://microbit-foundation.github.io/makecode-embed/
13
+
14
+ ## License
15
+
16
+ This software is under the MIT open source license.
17
+
18
+ [SPDX-License-Identifier: MIT](LICENSE)
19
+
20
+ We use dependencies via the NPM registry as specified by the package.json file under common Open Source licenses.
21
+
22
+ The MakeCode/PXT types are derived from the [Microsoft MakeCode/PXT repository](https://github.com/Microsoft/pxt) as of 954d72b3a763608ca6f484807f511591ce48691a under a MIT license.
23
+
24
+ Full details of each package can be found by running `license-checker`:
25
+
26
+ ```bash
27
+ $ npx license-checker --direct --summary --production
28
+ ```
29
+
30
+ Omit the flags as desired to obtain more detail.
31
+
32
+ ## Code of Conduct
33
+
34
+ Trust, partnership, simplicity and passion are our core values we live and
35
+ breathe in our daily work life and within our projects. Our open-source
36
+ projects are no exception. We have an active community which spans the globe
37
+ and we welcome and encourage participation and contributions to our projects
38
+ by everyone. We work to foster a positive, open, inclusive and supportive
39
+ environment and trust that our community respects the micro:bit code of
40
+ conduct. Please see our [code of conduct](https://microbit.org/safeguarding/)
41
+ which outlines our expectations for all those that participate in our
42
+ community and details on how to report any concerns and what would happen
43
+ should breaches occur.
@@ -0,0 +1,24 @@
1
+ /**
2
+ * A React component
3
+ * to render MakeCode block snippets
4
+ */
5
+ import React from 'react';
6
+ import { BlockLayout, Project } from '../vanilla/pxt.js';
7
+ export interface MakeCodeBlocksRenderingProps {
8
+ className?: string;
9
+ code?: string | Project;
10
+ packageId?: string;
11
+ package?: string;
12
+ snippetMode?: boolean;
13
+ layout?: BlockLayout;
14
+ loaderCmp?: React.ReactNode;
15
+ }
16
+ export interface MakeCodeBlocksRenderingState {
17
+ uri?: string;
18
+ width?: number;
19
+ height?: number;
20
+ error?: string;
21
+ rendering: boolean;
22
+ }
23
+ declare const _default: React.MemoExoticComponent<({ loaderCmp, package: _package, packageId, snippetMode, layout, code, className, }: MakeCodeBlocksRenderingProps) => import("react/jsx-runtime").JSX.Element>;
24
+ export default _default;
@@ -0,0 +1,80 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ /**
3
+ * A React component
4
+ * to render MakeCode block snippets
5
+ */
6
+ import React, { useState, useEffect } from 'react';
7
+ import { useMakeCodeRenderBlocksContext } from './MakeCodeRenderBlocksProvider.js';
8
+ const MakeCodeBlocksRendering = ({ loaderCmp, package: _package, packageId, snippetMode, layout, code, className, }) => {
9
+ const [state, setState] = useState({
10
+ rendering: true,
11
+ });
12
+ const { renderBlocks } = useMakeCodeRenderBlocksContext();
13
+ useEffect(() => {
14
+ let ignoreReponse = false;
15
+ async function intializeRendering() {
16
+ try {
17
+ const r = await renderBlocks({
18
+ code: code || '',
19
+ options: {
20
+ packageId,
21
+ package: _package,
22
+ snippetMode,
23
+ layout,
24
+ },
25
+ });
26
+ if (!ignoreReponse) {
27
+ setState({
28
+ uri: r.uri,
29
+ width: r.width,
30
+ height: r.height,
31
+ rendering: false,
32
+ });
33
+ }
34
+ }
35
+ catch (e) {
36
+ if (!ignoreReponse) {
37
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
38
+ setState({ error: e.toString(), rendering: false });
39
+ }
40
+ }
41
+ }
42
+ if (typeof code === 'string' && !code.trim()) {
43
+ // If you render an empty string MakeCode responds with a smiley face, so we
44
+ // need to check first.
45
+ setState({
46
+ rendering: false,
47
+ height: 0,
48
+ width: 0,
49
+ });
50
+ }
51
+ else {
52
+ intializeRendering();
53
+ }
54
+ return () => {
55
+ ignoreReponse = true;
56
+ };
57
+ }, [code, packageId, _package, snippetMode, layout, renderBlocks]);
58
+ const { uri, width, height, error, rendering } = state;
59
+ let component;
60
+ if (width === 0 && height === 0) {
61
+ component = null;
62
+ }
63
+ else if (rendering) {
64
+ component = loaderCmp ? loaderCmp : _jsx("div", { children: "Loading..." });
65
+ }
66
+ else if (error) {
67
+ component = _jsx("div", { children: error });
68
+ }
69
+ else if (uri) {
70
+ component = (_jsx("img", { className: "ui image", alt: code === undefined || typeof code === 'string'
71
+ ? code
72
+ : code.text['main.ts'], src: uri, width: width, height: height }));
73
+ }
74
+ else {
75
+ throw new Error('Unexpected state.');
76
+ }
77
+ return (_jsx("div", { className: className, style: { overflow: 'auto' }, children: component }));
78
+ };
79
+ export default React.memo(MakeCodeBlocksRendering);
80
+ //# sourceMappingURL=MakeCodeBlocksRendering.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MakeCodeBlocksRendering.js","sourceRoot":"","sources":["../../src/react/MakeCodeBlocksRendering.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,38 @@
1
+ import React from 'react';
2
+ import { MakeCodeFrameDriver } from '../vanilla/makecode-frame-driver.js';
3
+ import { EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, Project, ProjectFilters } from '../vanilla/pxt.js';
4
+ export interface MakeCodeFrameProps extends React.ComponentPropsWithoutRef<'iframe'> {
5
+ baseUrl?: string;
6
+ version?: string;
7
+ lang?: string;
8
+ controller?: 1 | 2;
9
+ queryParams?: Record<string, string>;
10
+ initialProjects: () => Promise<Project[]>;
11
+ controllerId?: string;
12
+ filters?: ProjectFilters;
13
+ searchBar?: boolean;
14
+ onDownload?: (download: {
15
+ name: string;
16
+ hex: string;
17
+ }) => void;
18
+ onSave?: (save: {
19
+ name: string;
20
+ hex: string;
21
+ }) => void;
22
+ onBack?: () => void;
23
+ onBackLongPress?: () => void;
24
+ onEditorContentLoaded?(event: EditorContentLoadedRequest): void;
25
+ onWorkspaceLoaded?(event: EditorWorkspaceSyncRequest): void;
26
+ onWorkspaceSync?(event: EditorWorkspaceSyncRequest): void;
27
+ /**
28
+ * This is only called via MakeCode UI that's not visible in embedded mode.
29
+ *
30
+ * It's intention is to delete all projects/settings.
31
+ */
32
+ onWorkspaceReset?(event: EditorWorkspaceSyncRequest): void;
33
+ onWorkspaceEvent?(event: EditorEvent): void;
34
+ onWorkspaceSave?(event: EditorWorkspaceSaveRequest): void;
35
+ onTutorialEvent?(event: EditorMessageTutorialEventRequest): void;
36
+ }
37
+ declare const MakeCodeFrame: React.ForwardRefExoticComponent<MakeCodeFrameProps & React.RefAttributes<MakeCodeFrameDriver>>;
38
+ export default MakeCodeFrame;
@@ -0,0 +1,72 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createElement as _createElement } from "react";
3
+ import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
4
+ import { createMakeCodeURL, MakeCodeFrameDriver, } from '../vanilla/makecode-frame-driver.js';
5
+ const styles = {
6
+ iframe: {
7
+ width: '100%',
8
+ flexGrow: 1,
9
+ border: 'none',
10
+ },
11
+ };
12
+ const MakeCodeFrame = forwardRef(function MakeCode(props, ref) {
13
+ const { baseUrl = 'https://makecode.microbit.org', version, lang, controller, queryParams, initialProjects, controllerId, filters, searchBar, onDownload, onSave, onBack, onBackLongPress, onEditorContentLoaded, onWorkspaceLoaded, onWorkspaceSync, onWorkspaceReset, onWorkspaceEvent, onWorkspaceSave, onTutorialEvent, ...rest } = props;
14
+ const options = useMemo(() => {
15
+ return {
16
+ initialProjects,
17
+ controllerId,
18
+ filters,
19
+ searchBar,
20
+ onDownload,
21
+ onSave,
22
+ onBack,
23
+ onBackLongPress,
24
+ onEditorContentLoaded,
25
+ onWorkspaceLoaded,
26
+ onWorkspaceSync,
27
+ onWorkspaceReset,
28
+ onWorkspaceEvent,
29
+ onWorkspaceSave,
30
+ onTutorialEvent,
31
+ };
32
+ }, [
33
+ controllerId,
34
+ filters,
35
+ initialProjects,
36
+ onBack,
37
+ onBackLongPress,
38
+ onDownload,
39
+ onEditorContentLoaded,
40
+ onSave,
41
+ onTutorialEvent,
42
+ onWorkspaceEvent,
43
+ onWorkspaceLoaded,
44
+ onWorkspaceReset,
45
+ onWorkspaceSave,
46
+ onWorkspaceSync,
47
+ searchBar,
48
+ ]);
49
+ // Reload MakeCode if the URL changes
50
+ const src = createMakeCodeURL(baseUrl, version, lang, controller, queryParams);
51
+ return (_createElement(MakeCodeFrameInner, { ...rest, ref: ref, key: src, src: src, options: options }));
52
+ });
53
+ const MakeCodeFrameInner = forwardRef(function MakeCodeFrameInner(props, ref) {
54
+ const { options, style, ...rest } = props;
55
+ const iframeRef = useRef(null);
56
+ // We keep a fixed driver (which has state for messages) and update its options as needed.
57
+ const driverRef = useRef(new MakeCodeFrameDriver(options, () => iframeRef.current ?? undefined));
58
+ useEffect(() => {
59
+ const driver = driverRef.current;
60
+ driver.initialize();
61
+ return () => {
62
+ driver.dispose();
63
+ };
64
+ }, []);
65
+ useEffect(() => {
66
+ driverRef.current.setOptions(options);
67
+ }, [options]);
68
+ useImperativeHandle(ref, () => driverRef.current, []);
69
+ return (_jsx("iframe", { ref: iframeRef, title: "MakeCode", style: { ...styles.iframe, ...style }, allow: "usb; autoplay; camera; microphone;", ...rest }));
70
+ });
71
+ export default MakeCodeFrame;
72
+ //# sourceMappingURL=MakeCodeFrame.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MakeCodeFrame.js","sourceRoot":"","sources":["../../src/react/MakeCodeFrame.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from 'react';
2
+ import { MakeCodeRenderBlocksOptions } from '../vanilla/makecode-render-blocks.js';
3
+ import { UseMakeCodeRenderBlocksReturn } from './useMakeCodeRenderBlocks.js';
4
+ export declare const MakeCodeRenderBlocksProvider: ({ options, children, }: {
5
+ options: MakeCodeRenderBlocksOptions;
6
+ children: ReactNode;
7
+ }) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const useMakeCodeRenderBlocksContext: () => UseMakeCodeRenderBlocksReturn;
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createContext, useContext } from 'react';
3
+ import useMakeCodeRenderBlocks from './useMakeCodeRenderBlocks.js';
4
+ const MakeCodeRenderBlocksContext = createContext({
5
+ renderBlocks: () => {
6
+ throw new Error('Configure MakeCodeRenderBlocksProvider.');
7
+ },
8
+ });
9
+ export const MakeCodeRenderBlocksProvider = ({ options, children, }) => {
10
+ const value = useMakeCodeRenderBlocks(options);
11
+ return (_jsx(MakeCodeRenderBlocksContext.Provider, { value: value, children: children }));
12
+ };
13
+ export const useMakeCodeRenderBlocksContext = () => useContext(MakeCodeRenderBlocksContext);
14
+ //# sourceMappingURL=MakeCodeRenderBlocksProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MakeCodeRenderBlocksProvider.js","sourceRoot":"","sources":["../../src/react/MakeCodeRenderBlocksProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,uBAEN,MAAM,8BAA8B,CAAC;AAEtC,MAAM,2BAA2B,GAC/B,aAAa,CAAgC;IAC3C,YAAY,EAAE,GAAG,EAAE;QACjB,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;IAC7D,CAAC;CACF,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAC3C,OAAO,EACP,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;IAC/C,OAAO,CACL,KAAC,2BAA2B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC/C,QAAQ,GAC4B,CACxC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,EAAE,CACjD,UAAU,CAAC,2BAA2B,CAAC,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { default as MakeCodeFrame, type MakeCodeFrameProps, } from './MakeCodeFrame.js';
2
+ export { default as useMakeCodeRenderBlocks, type UseMakeCodeRenderBlocksReturn, } from './useMakeCodeRenderBlocks.js';
3
+ export { defaultMakeCodeProject, emptyMakeCodeProject, } from '../vanilla/examples.js';
4
+ export type { CreateEvent, EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialCompletedEventRequest, EditorMessageTutorialEventRequest, EditorMessageTutorialExitEventRequest, EditorMessageTutorialLoadedEventRequest, EditorMessageTutorialProgressEventRequest, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, Project, ProjectCreationOptions, ProjectFilters, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, ShareResult, StartActivityOptions, ToolboxCategoryDefinition, ToolboxBlockDefinition, UIEvent, } from '../vanilla/pxt.js';
@@ -0,0 +1,4 @@
1
+ export { default as MakeCodeFrame, } from './MakeCodeFrame.js';
2
+ export { default as useMakeCodeRenderBlocks, } from './useMakeCodeRenderBlocks.js';
3
+ export { defaultMakeCodeProject, emptyMakeCodeProject, } from '../vanilla/examples.js';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,aAAa,GAEzB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,OAAO,IAAI,uBAAuB,GAEnC,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC"}
@@ -0,0 +1,6 @@
1
+ import { MakeCodeRenderBlocksOptions, RenderBlocksRequest, RenderBlocksResponse } from '../vanilla/makecode-render-blocks.js';
2
+ export interface UseMakeCodeRenderBlocksReturn {
3
+ renderBlocks: (req: RenderBlocksRequest) => Promise<RenderBlocksResponse>;
4
+ }
5
+ declare const useMakeCodeRenderBlocks: (options: MakeCodeRenderBlocksOptions) => UseMakeCodeRenderBlocksReturn;
6
+ export default useMakeCodeRenderBlocks;
@@ -0,0 +1,16 @@
1
+ import { useEffect, useMemo } from 'react';
2
+ import createMakeCodeRenderBlocks from '../vanilla/makecode-render-blocks.js';
3
+ const useMakeCodeRenderBlocks = (options) => {
4
+ const { disabled, lang, version } = options;
5
+ const memoizedOptions = useMemo(() => {
6
+ return { disabled, lang, version };
7
+ }, [disabled, lang, version]);
8
+ const returnValue = useMemo(() => createMakeCodeRenderBlocks(memoizedOptions), [memoizedOptions]);
9
+ useEffect(() => {
10
+ returnValue.initialize();
11
+ return () => returnValue.dispose();
12
+ }, [returnValue]);
13
+ return returnValue;
14
+ };
15
+ export default useMakeCodeRenderBlocks;
16
+ //# sourceMappingURL=useMakeCodeRenderBlocks.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMakeCodeRenderBlocks.js","sourceRoot":"","sources":["../../src/react/useMakeCodeRenderBlocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,0BAKN,MAAM,sCAAsC,CAAC;AAM9C,MAAM,uBAAuB,GAAG,CAC9B,OAAoC,EACL,EAAE;IACjC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAC5C,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9B,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,0BAA0B,CAAC,eAAe,CAAC,EACjD,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,UAAU,EAAE,CAAC;QACzB,OAAO,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { Project } from './pxt.js';
2
+ export declare const defaultMakeCodeProject: Project;
3
+ export declare const emptyMakeCodeProject: Project;
@@ -0,0 +1,17 @@
1
+ export const defaultMakeCodeProject = {
2
+ text: {
3
+ 'main.blocks': '<xml xmlns="http://www.w3.org/1999/xhtml">\n <block type="pxt-on-start" id=",{,HjW]u:lVGcDRS_Cu|" x="-247" y="113"></block>\n</xml>',
4
+ 'main.ts': '',
5
+ 'README.md': ' ',
6
+ 'pxt.json': '{\n "name": "Untitled",\n "dependencies": {\n "core": "*"\n , "radio": "*"\n },\n "description": "",\n "files": [\n "main.blocks",\n "main.ts",\n "README.md"\n ]\n}',
7
+ },
8
+ };
9
+ export const emptyMakeCodeProject = {
10
+ text: {
11
+ 'main.blocks': '<xml xmlns="http://www.w3.org/1999/xhtml">\n <variables></variables>\n</xml>',
12
+ 'main.ts': '\n',
13
+ 'README.md': ' ',
14
+ 'pxt.json': '{\n "name": "Untitled",\n "dependencies": {\n "core": "*"\n , "radio": "*"\n },\n "description": "",\n "files": [\n "main.blocks",\n "main.ts",\n "README.md"\n ]\n}',
15
+ },
16
+ };
17
+ //# sourceMappingURL=examples.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"examples.js","sourceRoot":"","sources":["../../src/vanilla/examples.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,sBAAsB,GAAY;IAC7C,IAAI,EAAE;QACJ,aAAa,EACX,sIAAsI;QACxI,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,GAAG;QAChB,UAAU,EACR,mNAAmN;KACtN;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAY;IAC3C,IAAI,EAAE;QACJ,aAAa,EACX,+EAA+E;QACjF,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,GAAG;QAChB,UAAU,EACR,mNAAmN;KACtN;CACF,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { MakeCodeFrameDriver } from './makecode-frame-driver.js';
2
+ export { default as useMakeCodeRenderBlocks, type MakeCodeRenderBlocksReturn, } from './makecode-render-blocks.js';
3
+ export { defaultMakeCodeProject, emptyMakeCodeProject, } from '../vanilla/examples.js';
4
+ export type { CreateEvent, EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialCompletedEventRequest, EditorMessageTutorialEventRequest, EditorMessageTutorialExitEventRequest, EditorMessageTutorialLoadedEventRequest, EditorMessageTutorialProgressEventRequest, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, Project, ProjectCreationOptions, ProjectFilters, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, ShareResult, StartActivityOptions, ToolboxCategoryDefinition, ToolboxBlockDefinition, UIEvent, } from '../vanilla/pxt.js';
@@ -0,0 +1,4 @@
1
+ export { MakeCodeFrameDriver } from './makecode-frame-driver.js';
2
+ export { default as useMakeCodeRenderBlocks, } from './makecode-render-blocks.js';
3
+ export { defaultMakeCodeProject, emptyMakeCodeProject, } from '../vanilla/examples.js';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/vanilla/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,OAAO,EACL,OAAO,IAAI,uBAAuB,GAEnC,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC"}