Upgrade MakeCode embed and microbit connection libraries (#586)

Use MakeCodeProject instead of Project as per API change in MakeCode embed

Author: microbit-grace

package-lock.json

@@ -61,8 +61,8 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@microbit/makecode-embed": "^0.0.0-alpha.7",
-    "@microbit/microbit-connection": "^0.0.0-alpha.30",
+    "@microbit/makecode-embed": "^0.1.0",
+    "@microbit/microbit-connection": "^0.0.0-alpha.33",
     "@microbit/ml-header-generator": "^0.4.3",
     "@microbit/smoothie": "^1.37.0-microbit.2",
     "@tensorflow/tfjs": "^4.20.0",

package.json

@@ -7,13 +7,13 @@ import { Box, Card, SkeletonText, VStack } from "@chakra-ui/react";
 import {
   BlockLayout,
   MakeCodeBlocksRendering,
-  Project,
+  MakeCodeProject,
 } from "@microbit/makecode-embed/react";
 import { memo, useLayoutEffect, useRef, useState } from "react";
 import { tourElClassname } from "../tours";
 
 interface CodeViewCardProps {
-  project: Project;
+  project: MakeCodeProject;
   parentRef: React.RefObject<HTMLDivElement>;
 }
 

src/components/CodeViewCard.tsx

@@ -61,13 +61,7 @@ const TestingModelTable = () => {
   const scrollableAreaRef = useRef<HTMLDivElement>(null);
   const intl = useIntl();
   return (
-    <MakeCodeRenderBlocksProvider
-      key={makeCodeLang}
-      options={{
-        version: undefined,
-        lang: makeCodeLang,
-      }}
-    >
+    <MakeCodeRenderBlocksProvider key={makeCodeLang} lang={makeCodeLang}>
       <HeadingGrid {...gridCommonProps} px={5} headings={headings} />
       <VStack
         px={5}

src/components/TestingModelTable.tsx

@@ -8,7 +8,7 @@ import {
   EditorWorkspaceSaveRequest,
   MakeCodeFrameDriver,
   MakeCodeFrameProps,
-  Project,
+  MakeCodeProject,
 } from "@microbit/makecode-embed/react";
 import {
   createContext,
@@ -53,7 +53,7 @@ export type LoadType = "drop-load" | "file-upload";
 interface ProjectContext {
   browserNavigationToEditor(): Promise<boolean>;
   openEditor(): Promise<void>;
-  project: Project;
+  project: MakeCodeProject;
   projectEdited: boolean;
   resetProject: () => void;
   loadFile: (file: File, type: LoadType) => void;

src/hooks/project-hooks.tsx

@@ -8,7 +8,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Project } from "@microbit/makecode-embed/react";
+import { MakeCodeProject } from "@microbit/makecode-embed/react";
 import * as tf from "@tensorflow/tfjs";
 import { assert, vi } from "vitest";
 import { TrainingResult, trainModel } from "../ml";
@@ -66,7 +66,7 @@ describe("test project update", () => {
     assert(!trainingResult.error);
     // The oldProject has had the _history and .simstate fields removed.
     // We don't care about these and it makes equality easier to test.
-    const projectToUpdate = oldProject as unknown as Project;
+    const projectToUpdate = oldProject as unknown as MakeCodeProject;
 
     const projectToUpdatePxtJSON = projectToUpdate.text?.[filenames.pxtJson];
     const projectToUpdatePxt = JSON.parse(
@@ -87,7 +87,7 @@ describe("test project update", () => {
       projectToUpdate.text?.[filenames.autogenerated]
     );
 
-    const updatedProject: Project = {
+    const updatedProject: MakeCodeProject = {
       ...projectToUpdate,
       text: {
         ...projectToUpdate.text,
@@ -107,7 +107,7 @@ describe("test project update", () => {
           data,
           trainingResult.model,
           currentDataWindow,
-          projectToUpdate as unknown as Project
+          projectToUpdate as unknown as MakeCodeProject
         ),
       },
     };
@@ -256,7 +256,7 @@ describe("test actionNamesFromLabels", () => {
 
 describe("test hasMakeCodeMlExtension", () => {
   it("has extension, returns true", () => {
-    const project: Project = {
+    const project: MakeCodeProject = {
       text: {
         [filenames.pxtJson]: JSON.stringify({
           dependencies: {
@@ -269,7 +269,7 @@ describe("test hasMakeCodeMlExtension", () => {
   });
 
   it("does not have extension, returns false", () => {
-    const project: Project = {
+    const project: MakeCodeProject = {
       text: {
         [filenames.pxtJson]: JSON.stringify({
           dependencies: {

src/makecode/utils.test.ts

@@ -11,7 +11,7 @@ import upperFirst from "lodash.upperfirst";
 import { DatasetEditorJsonFormat } from "../model";
 import { getMainScript } from "./generate-main-scripts";
 import { getAutogeneratedTs, getDatasetJson } from "./generate-custom-scripts";
-import { Project } from "@microbit/makecode-embed/react";
+import { MakeCodeProject } from "@microbit/makecode-embed/react";
 import { DataWindow } from "../store";
 import { untitledProjectName } from "../project-name";
 
@@ -64,7 +64,7 @@ export const generateCustomFiles = (
   actionState: DatasetEditorJsonFormat,
   model: LayersModel | undefined,
   dataWindow: DataWindow,
-  project?: Project
+  project?: MakeCodeProject
 ) => {
   const { data: actions } = actionState;
   const useableActions = model ? actions : [];
@@ -135,7 +135,7 @@ export const actionNamesFromLabels = (actionLabels: string[]): ActionName[] => {
   return actionNames;
 };
 
-export const hasMakeCodeMlExtension = (project: Project) => {
+export const hasMakeCodeMlExtension = (project: MakeCodeProject) => {
   if (!project.text || !project.text[filenames.pxtJson]) {
     return false;
   }

src/makecode/utils.ts

@@ -12,7 +12,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { Project } from "@microbit/makecode-embed/react";
+import { MakeCodeProject } from "@microbit/makecode-embed/react";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { FormattedMessage, IntlShape, useIntl } from "react-intl";
 import { useNavigate } from "react-router";
@@ -38,7 +38,7 @@ const ImportPage = () => {
   const [name, setName] = useState<string>(defaultProjectName);
   const isValidSetup = validateProjectName(name);
   const [fetchingProject, setFetchingProject] = useState<boolean>(true);
-  const [project, setProject] = useState<Project>();
+  const [project, setProject] = useState<MakeCodeProject>();
   const logging = useLogging();
 
   useEffect(() => {
@@ -168,7 +168,9 @@ const ImportPage = () => {
   );
 };
 
-const isValidProject = (content: Project): content is Project => {
+const isValidProject = (
+  content: MakeCodeProject
+): content is MakeCodeProject => {
   return (
     content &&
     typeof content === "object" &&
@@ -181,7 +183,7 @@ const fetchMicrobitOrgResourceProjectCode = async (
   activitiesBaseUrl: string,
   resource: MicrobitOrgResource,
   intl: IntlShape
-): Promise<Project> => {
+): Promise<MakeCodeProject> => {
   const url = `${activitiesBaseUrl}${encodeURIComponent(
     resource.id
   )}-makecode.json`;

src/pages/ImportPage.tsx

@@ -4,7 +4,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Project } from "@microbit/makecode-embed/react";
+import { MakeCodeProject } from "@microbit/makecode-embed/react";
 import * as tf from "@tensorflow/tfjs";
 import { create } from "zustand";
 import { devtools, persist } from "zustand/middleware";
@@ -82,7 +82,7 @@ interface PredictionResult {
   detected: Action | undefined;
 }
 
-const createUntitledProject = (): Project => ({
+const createUntitledProject = (): MakeCodeProject => ({
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   header: {
     target: "microbit",
@@ -114,7 +114,7 @@ const createUntitledProject = (): Project => ({
 });
 
 const updateProject = (
-  project: Project,
+  project: MakeCodeProject,
   projectEdited: boolean,
   actions: ActionData[],
   model: tf.LayersModel | undefined,
@@ -151,7 +151,7 @@ export interface State {
 
   isRecording: boolean;
 
-  project: Project;
+  project: MakeCodeProject;
   /**
    * We use this for the UI to tell when we've switched new project,
    * e.g. to show a toast.
@@ -220,7 +220,7 @@ export interface Actions {
   dataCollectionMicrobitConnected(): void;
 
   loadDataset(actions: ActionData[]): void;
-  loadProject(project: Project, name: string): void;
+  loadProject(project: MakeCodeProject, name: string): void;
   setEditorOpen(open: boolean): void;
   recordingStarted(): void;
   recordingStopped(): void;
@@ -244,11 +244,11 @@ export interface Actions {
    * When interacting outside of React to sync with MakeCode it's important to have
    * the current project after state changes.
    */
-  getCurrentProject(): Project;
+  getCurrentProject(): MakeCodeProject;
   checkIfProjectNeedsFlush(): boolean;
   checkIfLangChanged(): boolean;
   langChangeFlushedToEditor(): void;
-  editorChange(project: Project): void;
+  editorChange(project: MakeCodeProject): void;
   editorReady(): void;
   editorTimedOut(): void;
   getEditorStartUp(): EditorStartUp;
@@ -669,7 +669,7 @@ const createMlStore = (logging: Logging) => {
            * Generally project loads go via MakeCode as it reads the hex but when we open projects
            * from microbit.org we have the JSON already and use this route.
            */
-          loadProject(project: Project, name: string) {
+          loadProject(project: MakeCodeProject, name: string) {
             const newActions = getActionsFromProject(project);
             set(({ settings }) => {
               const timestamp = Date.now();
@@ -843,7 +843,7 @@ const createMlStore = (logging: Logging) => {
             );
           },
 
-          editorChange(newProject: Project) {
+          editorChange(newProject: MakeCodeProject) {
             const actionName = "editorChange";
             set(
               (state) => {
@@ -1364,7 +1364,7 @@ const actionIcon = ({
   return useableIcons[0];
 };
 
-const getActionsFromProject = (project: Project): ActionData[] => {
+const getActionsFromProject = (project: MakeCodeProject): ActionData[] => {
   const { text } = project;
   if (text === undefined || !("dataset.json" in text)) {
     return [];
@@ -1376,7 +1376,10 @@ const getActionsFromProject = (project: Project): ActionData[] => {
   return dataset.data as ActionData[];
 };
 
-const renameProject = (project: Project, name: string): Project => {
+const renameProject = (
+  project: MakeCodeProject,
+  name: string
+): MakeCodeProject => {
   const pxtString = project.text?.[filenames.pxtJson];
   const pxt = JSON.parse(pxtString ?? "{}") as Record<string, unknown>;