@microbit/makecode-embed 0.0.0-alpha.7 → 0.2.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) YEAR AUTHOR
+Copyright (c) 2024-2025 Micro:bit Educational Foundation and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,21 +1,25 @@
-# React/JavaScript library for embedding Microsoft MakeCode as an iframe
+# MakeCode Embed
 
-This project is a work in progress.
+<a href="https://microbit-foundation.github.io/makecode-embed/" class="typedoc-ignore">This documentation is best viewed on the documentation site rather than GitHub or NPM package site.</a>
+
+This is a React/JavaScript library for embedding Microsoft MakeCode as an iframe.
 
 It is intended to be used by other Micro:bit Educational Foundation projects
 that need to embed MakeCode and, when the API stabilises, to be useful to others
 who embed MakeCode.
 
-## Documentation
+- [StoryBook demo of the components](https://makecode-embed.pages.dev/)
+
+## Usage
 
-There isn't any documentation yet. You can find a StoryBook demo of the
-components at https://microbit-foundation.github.io/makecode-embed/
+- [React usage documentation](docs/react.md)
+- [VanillaJS usage documentation](docs/vanilla.md)
 
 ## License
 
 This software is under the MIT open source license.
 
-[SPDX-License-Identifier: MIT](LICENSE)
+[SPDX-License-Identifier: MIT](LICENSE.md)
 
 We use dependencies via the NPM registry as specified by the package.json file under common Open Source licenses.
 

package/dist/cjs/index.d.ts

@@ -0,0 +1,10 @@
+export { default as MakeCodeFrame, type MakeCodeFrameProps, } from './react/MakeCodeFrame.js';
+export { default as useMakeCodeRenderBlocks, type UseMakeCodeRenderBlocksReturn, } from './react/useMakeCodeRenderBlocks.js';
+export { MakeCodeRenderBlocksProvider } from './react/MakeCodeRenderBlocksProvider.js';
+export { default as MakeCodeBlocksRendering, type MakeCodeBlocksRenderingProps, } from './react/MakeCodeBlocksRendering.js';
+export { defaultMakeCodeProject, emptyMakeCodeProject, } from './vanilla/examples.js';
+export { MakeCodeFrameDriver, createMakeCodeURL, } from './vanilla/makecode-frame-driver.js';
+export { BlockLayout } from './vanilla/pxt.js';
+export { createMakeCodeRenderBlocks } from './vanilla/makecode-render-blocks.js';
+export type { MakeCodeRenderBlocksOptions, MakeCodeRenderBlocksReturn, RenderBlocksResponse, RenderBlocksRequest, } from './vanilla/makecode-render-blocks.js';
+export type { CreateEvent, EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialCompletedEventRequest, EditorMessageTutorialEventRequest, EditorMessageTutorialExitEventRequest, EditorMessageTutorialLoadedEventRequest, EditorMessageTutorialProgressEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, MakeCodeProject, ProjectCreationOptions, ProjectFilters, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, ShareResult, StartActivityOptions, ToolboxBlockDefinition, ToolboxCategoryDefinition, UIEvent, } from './vanilla/pxt.js';

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMakeCodeRenderBlocks = exports.BlockLayout = exports.createMakeCodeURL = exports.MakeCodeFrameDriver = exports.emptyMakeCodeProject = exports.defaultMakeCodeProject = exports.MakeCodeBlocksRendering = exports.MakeCodeRenderBlocksProvider = exports.useMakeCodeRenderBlocks = exports.MakeCodeFrame = void 0;
+var MakeCodeFrame_js_1 = require("./react/MakeCodeFrame.js");
+Object.defineProperty(exports, "MakeCodeFrame", { enumerable: true, get: function () { return __importDefault(MakeCodeFrame_js_1).default; } });
+var useMakeCodeRenderBlocks_js_1 = require("./react/useMakeCodeRenderBlocks.js");
+Object.defineProperty(exports, "useMakeCodeRenderBlocks", { enumerable: true, get: function () { return __importDefault(useMakeCodeRenderBlocks_js_1).default; } });
+var MakeCodeRenderBlocksProvider_js_1 = require("./react/MakeCodeRenderBlocksProvider.js");
+Object.defineProperty(exports, "MakeCodeRenderBlocksProvider", { enumerable: true, get: function () { return MakeCodeRenderBlocksProvider_js_1.MakeCodeRenderBlocksProvider; } });
+var MakeCodeBlocksRendering_js_1 = require("./react/MakeCodeBlocksRendering.js");
+Object.defineProperty(exports, "MakeCodeBlocksRendering", { enumerable: true, get: function () { return __importDefault(MakeCodeBlocksRendering_js_1).default; } });
+var examples_js_1 = require("./vanilla/examples.js");
+Object.defineProperty(exports, "defaultMakeCodeProject", { enumerable: true, get: function () { return examples_js_1.defaultMakeCodeProject; } });
+Object.defineProperty(exports, "emptyMakeCodeProject", { enumerable: true, get: function () { return examples_js_1.emptyMakeCodeProject; } });
+var makecode_frame_driver_js_1 = require("./vanilla/makecode-frame-driver.js");
+Object.defineProperty(exports, "MakeCodeFrameDriver", { enumerable: true, get: function () { return makecode_frame_driver_js_1.MakeCodeFrameDriver; } });
+Object.defineProperty(exports, "createMakeCodeURL", { enumerable: true, get: function () { return makecode_frame_driver_js_1.createMakeCodeURL; } });
+var pxt_js_1 = require("./vanilla/pxt.js");
+Object.defineProperty(exports, "BlockLayout", { enumerable: true, get: function () { return pxt_js_1.BlockLayout; } });
+var makecode_render_blocks_js_1 = require("./vanilla/makecode-render-blocks.js");
+Object.defineProperty(exports, "createMakeCodeRenderBlocks", { enumerable: true, get: function () { return makecode_render_blocks_js_1.createMakeCodeRenderBlocks; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,6DAGkC;AAFhC,kIAAA,OAAO,OAAiB;AAI1B,iFAG4C;AAF1C,sJAAA,OAAO,OAA2B;AAIpC,2FAAuF;AAA9E,+IAAA,4BAA4B,OAAA;AACrC,iFAG4C;AAF1C,sJAAA,OAAO,OAA2B;AAIpC,qDAG+B;AAF7B,qHAAA,sBAAsB,OAAA;AACtB,mHAAA,oBAAoB,OAAA;AAGtB,+EAG4C;AAF1C,+HAAA,mBAAmB,OAAA;AACnB,6HAAA,iBAAiB,OAAA;AAGnB,2CAA+C;AAAtC,qGAAA,WAAW,OAAA;AAEpB,iFAAiF;AAAxE,uIAAA,0BAA0B,OAAA"}

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/dist/{react → cjs/react}/MakeCodeBlocksRendering.d.ts

@@ -3,10 +3,10 @@
  * to render MakeCode block snippets
  */
 import React from 'react';
-import { BlockLayout, Project } from '../vanilla/pxt.js';
+import { BlockLayout, MakeCodeProject } from '../vanilla/pxt.js';
 export interface MakeCodeBlocksRenderingProps {
     className?: string;
-    code?: string | Project;
+    code?: string | MakeCodeProject;
     packageId?: string;
     package?: string;
     snippetMode?: boolean;

package/dist/cjs/react/MakeCodeBlocksRendering.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * A React component
+ * to render MakeCode block snippets
+ */
+const react_1 = __importStar(require("react"));
+const MakeCodeRenderBlocksProvider_js_1 = require("./MakeCodeRenderBlocksProvider.js");
+const MakeCodeBlocksRendering = ({ loaderCmp, package: _package, packageId, snippetMode, layout, code, className, }) => {
+    const [state, setState] = (0, react_1.useState)({
+        rendering: true,
+    });
+    const { renderBlocks } = (0, MakeCodeRenderBlocksProvider_js_1.useMakeCodeRenderBlocksContext)();
+    (0, react_1.useEffect)(() => {
+        let ignoreReponse = false;
+        async function intializeRendering() {
+            try {
+                const r = await renderBlocks({
+                    code: code || '',
+                    options: {
+                        packageId,
+                        package: _package,
+                        snippetMode,
+                        layout,
+                    },
+                });
+                if (!ignoreReponse) {
+                    setState({
+                        uri: r.uri,
+                        width: r.width,
+                        height: r.height,
+                        rendering: false,
+                    });
+                }
+            }
+            catch (e) {
+                if (!ignoreReponse) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    setState({ error: e.toString(), rendering: false });
+                }
+            }
+        }
+        if (typeof code === 'string' && !code.trim()) {
+            // If you render an empty string MakeCode responds with a smiley face, so we
+            // need to check first.
+            setState({
+                rendering: false,
+                height: 0,
+                width: 0,
+            });
+        }
+        else {
+            intializeRendering();
+        }
+        return () => {
+            ignoreReponse = true;
+        };
+    }, [code, packageId, _package, snippetMode, layout, renderBlocks]);
+    const { uri, width, height, error, rendering } = state;
+    let component;
+    if (width === 0 && height === 0) {
+        component = null;
+    }
+    else if (rendering) {
+        component = loaderCmp ? loaderCmp : (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
+    }
+    else if (error) {
+        component = (0, jsx_runtime_1.jsx)("div", { children: error });
+    }
+    else if (uri) {
+        component = ((0, jsx_runtime_1.jsx)("img", { className: "ui image", alt: code === undefined || typeof code === 'string'
+                ? code
+                : code.text['main.ts'], src: uri, width: width, height: height }));
+    }
+    else {
+        throw new Error('Unexpected state.');
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { overflow: 'auto' }, children: component }));
+};
+exports.default = react_1.default.memo(MakeCodeBlocksRendering);
+//# sourceMappingURL=MakeCodeBlocksRendering.js.map

package/dist/cjs/react/MakeCodeBlocksRendering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MakeCodeBlocksRendering.js","sourceRoot":"","sources":["../../../src/react/MakeCodeBlocksRendering.tsx"],"names":[],"mappings":"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"}

package/dist/{react → cjs/react}/MakeCodeFrame.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { MakeCodeFrameDriver } from '../vanilla/makecode-frame-driver.js';
-import { EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, Project, ProjectFilters } from '../vanilla/pxt.js';
+import { EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, MakeCodeProject, ProjectFilters } from '../vanilla/pxt.js';
 export interface MakeCodeFrameProps extends React.ComponentPropsWithoutRef<'iframe'> {
     baseUrl?: string;
     version?: string;
     lang?: string;
     controller?: 1 | 2;
     queryParams?: Record<string, string>;
-    initialProjects: () => Promise<Project[]>;
+    initialProjects: () => Promise<MakeCodeProject[]>;
     controllerId?: string;
     filters?: ProjectFilters;
     searchBar?: boolean;

package/dist/cjs/react/MakeCodeFrame.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const makecode_frame_driver_js_1 = require("../vanilla/makecode-frame-driver.js");
+const styles = {
+    iframe: {
+        width: '100%',
+        flexGrow: 1,
+        border: 'none',
+    },
+};
+const MakeCodeFrame = (0, react_2.forwardRef)(function MakeCode(props, ref) {
+    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;
+    const options = (0, react_2.useMemo)(() => {
+        return {
+            initialProjects,
+            controllerId,
+            filters,
+            searchBar,
+            onDownload,
+            onSave,
+            onBack,
+            onBackLongPress,
+            onEditorContentLoaded,
+            onWorkspaceLoaded,
+            onWorkspaceSync,
+            onWorkspaceReset,
+            onWorkspaceEvent,
+            onWorkspaceSave,
+            onTutorialEvent,
+        };
+    }, [
+        controllerId,
+        filters,
+        initialProjects,
+        onBack,
+        onBackLongPress,
+        onDownload,
+        onEditorContentLoaded,
+        onSave,
+        onTutorialEvent,
+        onWorkspaceEvent,
+        onWorkspaceLoaded,
+        onWorkspaceReset,
+        onWorkspaceSave,
+        onWorkspaceSync,
+        searchBar,
+    ]);
+    // Reload MakeCode if the URL changes
+    const src = (0, makecode_frame_driver_js_1.createMakeCodeURL)(baseUrl, version, lang, controller, queryParams);
+    return ((0, react_1.createElement)(MakeCodeFrameInner, { ...rest, ref: ref, key: src, src: src, options: options }));
+});
+const MakeCodeFrameInner = (0, react_2.forwardRef)(function MakeCodeFrameInner(props, ref) {
+    const { options, style, ...rest } = props;
+    const iframeRef = (0, react_2.useRef)(null);
+    // We keep a fixed driver (which has state for messages) and update its options as needed.
+    const driverRef = (0, react_2.useRef)(new makecode_frame_driver_js_1.MakeCodeFrameDriver(options, () => iframeRef.current ?? undefined));
+    (0, react_2.useEffect)(() => {
+        const driver = driverRef.current;
+        driver.initialize();
+        return () => {
+            driver.dispose();
+        };
+    }, []);
+    (0, react_2.useEffect)(() => {
+        driverRef.current.setOptions(options);
+    }, [options]);
+    (0, react_2.useImperativeHandle)(ref, () => driverRef.current, []);
+    return ((0, jsx_runtime_1.jsx)("iframe", { ref: iframeRef, title: "MakeCode", style: { ...styles.iframe, ...style }, allow: "usb; autoplay; camera; microphone;", ...rest }));
+});
+exports.default = MakeCodeFrame;
+//# sourceMappingURL=MakeCodeFrame.js.map

package/dist/cjs/react/MakeCodeFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MakeCodeFrame.js","sourceRoot":"","sources":["../../../src/react/MakeCodeFrame.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/react/MakeCodeRenderBlocksProvider.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { UseMakeCodeRenderBlocksReturn } from './useMakeCodeRenderBlocks.js';
+export declare const MakeCodeRenderBlocksProvider: ({ disabled, version, lang, children, }: {
+    /**
+     * This can be used to disable loading MakeCode in scenarios where it will be unused.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * MakeCode version.
+     */
+    version?: string | undefined;
+    /**
+     * MakeCode language code.
+     */
+    lang?: string | undefined;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useMakeCodeRenderBlocksContext: () => UseMakeCodeRenderBlocksReturn;

package/dist/cjs/react/MakeCodeRenderBlocksProvider.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMakeCodeRenderBlocksContext = exports.MakeCodeRenderBlocksProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useMakeCodeRenderBlocks_js_1 = __importDefault(require("./useMakeCodeRenderBlocks.js"));
+const MakeCodeRenderBlocksContext = (0, react_1.createContext)({
+    renderBlocks: () => {
+        throw new Error('Configure MakeCodeRenderBlocksProvider.');
+    },
+});
+const MakeCodeRenderBlocksProvider = ({ disabled, version, lang, children, }) => {
+    const options = (0, react_1.useMemo)(() => {
+        return { disabled, version, lang };
+    }, [disabled, lang, version]);
+    const value = (0, useMakeCodeRenderBlocks_js_1.default)(options);
+    return ((0, jsx_runtime_1.jsx)(MakeCodeRenderBlocksContext.Provider, { value: value, children: children }));
+};
+exports.MakeCodeRenderBlocksProvider = MakeCodeRenderBlocksProvider;
+const useMakeCodeRenderBlocksContext = () => (0, react_1.useContext)(MakeCodeRenderBlocksContext);
+exports.useMakeCodeRenderBlocksContext = useMakeCodeRenderBlocksContext;
+//# sourceMappingURL=MakeCodeRenderBlocksProvider.js.map

package/dist/cjs/react/MakeCodeRenderBlocksProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MakeCodeRenderBlocksProvider.js","sourceRoot":"","sources":["../../../src/react/MakeCodeRenderBlocksProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAsE;AACtE,8FAEsC;AAEtC,MAAM,2BAA2B,GAC/B,IAAA,qBAAa,EAAgC;IAC3C,YAAY,EAAE,GAAG,EAAE;QACjB,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;IAC7D,CAAC;CACF,CAAC,CAAC;AAEE,MAAM,4BAA4B,GAAG,CAAC,EAC3C,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,QAAQ,GAeT,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC3B,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAA,oCAAuB,EAAC,OAAO,CAAC,CAAC;IAC/C,OAAO,CACL,uBAAC,2BAA2B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC/C,QAAQ,GAC4B,CACxC,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,4BAA4B,gCA6BvC;AAEK,MAAM,8BAA8B,GAAG,GAAG,EAAE,CACjD,IAAA,kBAAU,EAAC,2BAA2B,CAAC,CAAC;AAD7B,QAAA,8BAA8B,kCACD"}

package/dist/{react → cjs/react}/index.d.ts

@@ -5,4 +5,4 @@ export { default as MakeCodeBlocksRendering, type MakeCodeBlocksRenderingProps,
 export { defaultMakeCodeProject, emptyMakeCodeProject, } from '../vanilla/examples.js';
 export { MakeCodeFrameDriver, createMakeCodeURL, } from '../vanilla/makecode-frame-driver.js';
 export { BlockLayout } from '../vanilla/pxt.js';
-export type { CreateEvent, EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialCompletedEventRequest, EditorMessageTutorialEventRequest, EditorMessageTutorialExitEventRequest, EditorMessageTutorialLoadedEventRequest, EditorMessageTutorialProgressEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, Project, ProjectCreationOptions, ProjectFilters, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, ShareResult, StartActivityOptions, ToolboxBlockDefinition, ToolboxCategoryDefinition, UIEvent, } from '../vanilla/pxt.js';
+export type { CreateEvent, EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialCompletedEventRequest, EditorMessageTutorialEventRequest, EditorMessageTutorialExitEventRequest, EditorMessageTutorialLoadedEventRequest, EditorMessageTutorialProgressEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, MakeCodeProject, ProjectCreationOptions, ProjectFilters, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, ShareResult, StartActivityOptions, ToolboxBlockDefinition, ToolboxCategoryDefinition, UIEvent, } from '../vanilla/pxt.js';

package/dist/cjs/react/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockLayout = exports.createMakeCodeURL = exports.MakeCodeFrameDriver = exports.emptyMakeCodeProject = exports.defaultMakeCodeProject = exports.MakeCodeBlocksRendering = exports.MakeCodeRenderBlocksProvider = exports.useMakeCodeRenderBlocks = exports.MakeCodeFrame = void 0;
+var MakeCodeFrame_js_1 = require("./MakeCodeFrame.js");
+Object.defineProperty(exports, "MakeCodeFrame", { enumerable: true, get: function () { return __importDefault(MakeCodeFrame_js_1).default; } });
+var useMakeCodeRenderBlocks_js_1 = require("./useMakeCodeRenderBlocks.js");
+Object.defineProperty(exports, "useMakeCodeRenderBlocks", { enumerable: true, get: function () { return __importDefault(useMakeCodeRenderBlocks_js_1).default; } });
+var MakeCodeRenderBlocksProvider_js_1 = require("./MakeCodeRenderBlocksProvider.js");
+Object.defineProperty(exports, "MakeCodeRenderBlocksProvider", { enumerable: true, get: function () { return MakeCodeRenderBlocksProvider_js_1.MakeCodeRenderBlocksProvider; } });
+var MakeCodeBlocksRendering_js_1 = require("./MakeCodeBlocksRendering.js");
+Object.defineProperty(exports, "MakeCodeBlocksRendering", { enumerable: true, get: function () { return __importDefault(MakeCodeBlocksRendering_js_1).default; } });
+var examples_js_1 = require("../vanilla/examples.js");
+Object.defineProperty(exports, "defaultMakeCodeProject", { enumerable: true, get: function () { return examples_js_1.defaultMakeCodeProject; } });
+Object.defineProperty(exports, "emptyMakeCodeProject", { enumerable: true, get: function () { return examples_js_1.emptyMakeCodeProject; } });
+var makecode_frame_driver_js_1 = require("../vanilla/makecode-frame-driver.js");
+Object.defineProperty(exports, "MakeCodeFrameDriver", { enumerable: true, get: function () { return makecode_frame_driver_js_1.MakeCodeFrameDriver; } });
+Object.defineProperty(exports, "createMakeCodeURL", { enumerable: true, get: function () { return makecode_frame_driver_js_1.createMakeCodeURL; } });
+var pxt_js_1 = require("../vanilla/pxt.js");
+Object.defineProperty(exports, "BlockLayout", { enumerable: true, get: function () { return pxt_js_1.BlockLayout; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":";;;;;;AAAA,uDAG4B;AAF1B,kIAAA,OAAO,OAAiB;AAI1B,2EAGsC;AAFpC,sJAAA,OAAO,OAA2B;AAIpC,qFAAiF;AAAxE,+IAAA,4BAA4B,OAAA;AACrC,2EAGsC;AAFpC,sJAAA,OAAO,OAA2B;AAIpC,sDAGgC;AAF9B,qHAAA,sBAAsB,OAAA;AACtB,mHAAA,oBAAoB,OAAA;AAGtB,gFAG6C;AAF3C,+HAAA,mBAAmB,OAAA;AACnB,6HAAA,iBAAiB,OAAA;AAGnB,4CAAgD;AAAvC,qGAAA,WAAW,OAAA"}

package/dist/cjs/react/useMakeCodeRenderBlocks.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const makecode_render_blocks_js_1 = require("../vanilla/makecode-render-blocks.js");
+const useMakeCodeRenderBlocks = (options) => {
+    const { disabled, lang, version } = options;
+    const memoizedOptions = (0, react_1.useMemo)(() => {
+        return { disabled, lang, version };
+    }, [disabled, lang, version]);
+    const returnValue = (0, react_1.useMemo)(() => (0, makecode_render_blocks_js_1.createMakeCodeRenderBlocks)(memoizedOptions), [memoizedOptions]);
+    (0, react_1.useEffect)(() => {
+        returnValue.initialize();
+        return () => returnValue.dispose();
+    }, [returnValue]);
+    return returnValue;
+};
+exports.default = useMakeCodeRenderBlocks;
+//# sourceMappingURL=useMakeCodeRenderBlocks.js.map

package/dist/cjs/react/useMakeCodeRenderBlocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMakeCodeRenderBlocks.js","sourceRoot":"","sources":["../../../src/react/useMakeCodeRenderBlocks.tsx"],"names":[],"mappings":";;AAAA,iCAA2C;AAC3C,oFAM8C;AAM9C,MAAM,uBAAuB,GAAG,CAC9B,OAAoC,EACL,EAAE;IACjC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAC5C,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,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,IAAA,eAAO,EACzB,GAAG,EAAE,CAAC,IAAA,sDAA0B,EAAC,eAAe,CAAC,EACjD,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,IAAA,iBAAS,EAAC,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,kBAAe,uBAAuB,CAAC"}

package/dist/cjs/vanilla/examples.d.ts

@@ -0,0 +1,3 @@
+import { MakeCodeProject } from './pxt.js';
+export declare const defaultMakeCodeProject: MakeCodeProject;
+export declare const emptyMakeCodeProject: MakeCodeProject;

package/dist/cjs/vanilla/examples.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emptyMakeCodeProject = exports.defaultMakeCodeProject = void 0;
+exports.defaultMakeCodeProject = {
+    text: {
+        '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>',
+        'main.ts': '',
+        'README.md': ' ',
+        '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}',
+    },
+};
+exports.emptyMakeCodeProject = {
+    text: {
+        'main.blocks': '<xml xmlns="http://www.w3.org/1999/xhtml">\n  <variables></variables>\n</xml>',
+        'main.ts': '\n',
+        'README.md': ' ',
+        '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}',
+    },
+};
+//# sourceMappingURL=examples.js.map

package/dist/cjs/vanilla/examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.js","sourceRoot":"","sources":["../../../src/vanilla/examples.ts"],"names":[],"mappings":";;;AAEa,QAAA,sBAAsB,GAAoB;IACrD,IAAI,EAAE;QACJ,aAAa,EACX,sIAAsI;QACxI,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,GAAG;QAChB,UAAU,EACR,mNAAmN;KACtN;CACF,CAAC;AAEW,QAAA,oBAAoB,GAAoB;IACnD,IAAI,EAAE;QACJ,aAAa,EACX,+EAA+E;QACjF,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,GAAG;QAChB,UAAU,EACR,mNAAmN;KACtN;CACF,CAAC"}

package/dist/cjs/vanilla/index.d.ts

@@ -0,0 +1,6 @@
+export { defaultMakeCodeProject, emptyMakeCodeProject, } from '../vanilla/examples.js';
+export { MakeCodeFrameDriver, createMakeCodeURL, type EditorShareOptions, type Options, } from '../vanilla/makecode-frame-driver.js';
+export { BlockLayout } from '../vanilla/pxt.js';
+export type { CodeCard, CodeCardAction, CodeCardEditorType, CodeCardType, CodeValidationConfig, CreateEvent, DependencyMap, EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialCompletedEventRequest, EditorMessageTutorialEventRequest, EditorMessageTutorialExitEventRequest, EditorMessageTutorialLoadedEventRequest, EditorMessageTutorialProgressEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, FilterState, Header, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, PackageConfig, PackageExtension, MakeCodeProject, ProjectCreationOptions, ProjectFilters, ProjectTemplate, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, ScriptText, ShareResult, SnippetAnswerTypes, SnippetConfig, SnippetGoToOptions, SnippetParameters, SnippetQuestionInput, SnippetQuestions, StartActivityOptions, TargetVersions, ToolboxBlockDefinition, ToolboxCategoryDefinition, TutorialActivityInfo, TutorialBlockConfig, TutorialMetadata, TutorialOptions, TutorialStepInfo, UIEvent, YottaConfig, } from '../vanilla/pxt.js';
+export { createMakeCodeRenderBlocks } from '../vanilla/makecode-render-blocks.js';
+export type { MakeCodeRenderBlocksOptions, MakeCodeRenderBlocksReturn, RenderBlocksResponse, RenderBlocksRequest, } from '../vanilla/makecode-render-blocks.js';

package/dist/cjs/vanilla/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMakeCodeRenderBlocks = exports.BlockLayout = exports.createMakeCodeURL = exports.MakeCodeFrameDriver = exports.emptyMakeCodeProject = exports.defaultMakeCodeProject = void 0;
+var examples_js_1 = require("../vanilla/examples.js");
+Object.defineProperty(exports, "defaultMakeCodeProject", { enumerable: true, get: function () { return examples_js_1.defaultMakeCodeProject; } });
+Object.defineProperty(exports, "emptyMakeCodeProject", { enumerable: true, get: function () { return examples_js_1.emptyMakeCodeProject; } });
+var makecode_frame_driver_js_1 = require("../vanilla/makecode-frame-driver.js");
+Object.defineProperty(exports, "MakeCodeFrameDriver", { enumerable: true, get: function () { return makecode_frame_driver_js_1.MakeCodeFrameDriver; } });
+Object.defineProperty(exports, "createMakeCodeURL", { enumerable: true, get: function () { return makecode_frame_driver_js_1.createMakeCodeURL; } });
+var pxt_js_1 = require("../vanilla/pxt.js");
+Object.defineProperty(exports, "BlockLayout", { enumerable: true, get: function () { return pxt_js_1.BlockLayout; } });
+var makecode_render_blocks_js_1 = require("../vanilla/makecode-render-blocks.js");
+Object.defineProperty(exports, "createMakeCodeRenderBlocks", { enumerable: true, get: function () { return makecode_render_blocks_js_1.createMakeCodeRenderBlocks; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/vanilla/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/vanilla/index.ts"],"names":[],"mappings":";;;AAAA,sDAGgC;AAF9B,qHAAA,sBAAsB,OAAA;AACtB,mHAAA,oBAAoB,OAAA;AAGtB,gFAK6C;AAJ3C,+HAAA,mBAAmB,OAAA;AACnB,6HAAA,iBAAiB,OAAA;AAKnB,4CAAgD;AAAvC,qGAAA,WAAW,OAAA;AAwDpB,kFAAkF;AAAzE,uIAAA,0BAA0B,OAAA"}

package/dist/{vanilla → cjs/vanilla}/makecode-frame-driver.d.ts

@@ -1,5 +1,5 @@
-import { EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, Project, ProjectCreationOptions, ProjectFilters, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, ShareResult, StartActivityOptions, ToolboxCategoryDefinition } from './pxt.js';
-interface EditorShareOptions {
+import { EditorContentLoadedRequest, EditorEvent, EditorMessageTutorialEventRequest, EditorWorkspaceSaveRequest, EditorWorkspaceSyncRequest, ImportExternalProjectOptions, ImportFileOptions, ImportProjectOptions, InfoMessage, LanguageRestriction, MakeCodeProject, ProjectCreationOptions, ProjectFilters, RenderBlocksOptions, RenderByBlockIdOptions, RenderXmlOptions, ShareResult, StartActivityOptions, ToolboxCategoryDefinition } from './pxt.js';
+export interface EditorShareOptions {
     headerId: string;
     projectName: string;
 }
@@ -12,7 +12,7 @@ export interface Options {
      * The projects will receive updates via `onWorkspaceSave` and should be stored keyed by header
      * id.
      */
-    initialProjects: () => Promise<Project[]>;
+    initialProjects: () => Promise<MakeCodeProject[]>;
     /**
      * Set this to a value representing your app.
      */
@@ -262,4 +262,3 @@ export declare class MakeCodeFrameDriver {
     importFile(options: ImportFileOptions): void;
 }
 export declare const createMakeCodeURL: (baseUrl: string | undefined, version: string | undefined, lang: string | undefined, controller: number | undefined, queryParams: Record<string, string> | undefined) => string;
-export {};