Import a JSON project like a hex file (#622)

Fixes #618

Author: microbit-matt-hillsdon

src/hooks/project-hooks.tsx

@@ -28,7 +28,10 @@ import {
   PostImportDialogState,
   SaveStep,
 } from "../model";
-import { untitledProjectName as untitled } from "../project-name";
+import {
+  renameProject,
+  untitledProjectName as untitled,
+} from "../project-name";
 import { useStore } from "../store";
 import {
   createCodePageUrl,
@@ -56,6 +59,10 @@ interface ProjectContext {
   project: MakeCodeProject;
   projectEdited: boolean;
   resetProject: () => void;
+  importProject: (
+    project: MakeCodeProject,
+    projectNameOverride: string
+  ) => void;
   loadFile: (file: File, type: LoadType) => void;
   /**
    * Called to request a save.
@@ -355,6 +362,36 @@ export const ProjectProvider = ({
     ]
   );
 
+  const importProject = useCallback(
+    async (
+      project: MakeCodeProject,
+      projectNameOverride: string
+    ): Promise<void> => {
+      const hasTimedOut = await checkIfEditorStartUpTimedOut(
+        editorReadyPromise.promise
+      );
+      if (hasTimedOut) {
+        openEditorTimedOutDialog();
+        return;
+      }
+      try {
+        // This triggers the code in editorChanged to update actions etc.
+        await driverRef.current!.importProject({
+          project: renameProject(project, projectNameOverride),
+        });
+      } catch (e) {
+        setPostImportDialogState(PostImportDialogState.Error);
+      }
+    },
+    [
+      checkIfEditorStartUpTimedOut,
+      driverRef,
+      editorReadyPromise.promise,
+      openEditorTimedOutDialog,
+      setPostImportDialogState,
+    ]
+  );
+
   const setSave = useStore((s) => s.setSave);
   const save = useStore((s) => s.save);
   const settings = useStore((s) => s.settings);
@@ -456,6 +493,7 @@ export const ProjectProvider = ({
   const value = useMemo(
     () => ({
       loadFile,
+      importProject,
       openEditor,
       browserNavigationToEditor,
       project,
@@ -474,6 +512,7 @@ export const ProjectProvider = ({
     }),
     [
       loadFile,
+      importProject,
       openEditor,
       browserNavigationToEditor,
       project,

src/pages/ImportPage.tsx

@@ -75,21 +75,21 @@ const ImportPage = () => {
     });
   }, [activitiesBaseUrl, defaultProjectName, intl, logging, params]);
 
-  const loadProject = useStore((s) => s.loadProject);
+  const { importProject } = useProject();
   const newSession = useStore((s) => s.newSession);
   const timestamp = useStore((s) => s.timestamp);
 
   const handleStartSession = useCallback(() => {
     if (project) {
-      loadProject(project, name);
+      importProject(project, name);
       navigate(createDataSamplesPageUrl());
     } else {
       // If no resource fetched, start as new empty session
       // with provided project name
       newSession(name);
       navigate(createDataSamplesPageUrl());
     }
-  }, [loadProject, name, navigate, newSession, project]);
+  }, [importProject, name, navigate, newSession, project]);
 
   const { saveHex } = useProject();
   const handleSave = useCallback(() => {

src/pages/OpenSharedProjectPage.tsx

@@ -68,21 +68,21 @@ const contentStackProps: Partial<StackProps> = {
 const OpenSharedProjectPage = () => {
   const logging = useLogging();
   const navigate = useNavigate();
-  const loadProject = useStore((s) => s.loadProject);
+  const { importProject } = useProject();
   const [name, setName] = useState("");
   const { sharedState, header, dataset, projectText } =
     useProjectPreload(setName);
   const { shortId } = useParams();
 
   const handleOpenProject = useCallback(() => {
     if (!header || !projectText) return;
-    loadProject({ header: { ...header, name }, text: projectText }, name);
+    importProject({ header: { ...header, name }, text: projectText }, name);
     logging.event({
       type: "import-shared-project-complete",
       detail: { shortId },
     });
     navigate(createDataSamplesPageUrl());
-  }, [loadProject, header, projectText, name, navigate, logging, shortId]);
+  }, [importProject, header, projectText, name, navigate, logging, shortId]);
 
   if (sharedState === SharedState.Failed) {
     return <ErrorPreloading />;

src/project-name.ts

@@ -1,3 +1,6 @@
+import { MakeCodeProject } from "@microbit/makecode-embed";
+import { filenames } from "./makecode/utils";
+
 /**
  * (c) 2024, Micro:bit Educational Foundation and contributors
  *
@@ -7,3 +10,26 @@ export const untitledProjectName = "Untitled";
 export const validateProjectName = (name: string): boolean => {
   return name.trim().length > 0;
 };
+
+export const renameProject = (
+  project: MakeCodeProject,
+  name: string
+): MakeCodeProject => {
+  const pxtString = project.text?.[filenames.pxtJson];
+  const pxt = JSON.parse(pxtString ?? "{}") as Record<string, unknown>;
+
+  return {
+    ...project,
+    header: {
+      ...project.header!,
+      name,
+    },
+    text: {
+      ...project.text,
+      [filenames.pxtJson]: JSON.stringify({
+        ...pxt,
+        name,
+      }),
+    },
+  };
+};

src/store.ts

@@ -9,42 +9,38 @@ import * as tf from "@tensorflow/tfjs";
 import { create } from "zustand";
 import { devtools, persist } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
+import { BufferedData } from "./buffered-data";
 import { deployment } from "./deployment";
 import { flags } from "./flags";
+import { createPromise, PromiseInfo } from "./hooks/use-promise-ref";
 import { Logging } from "./logging/logging";
-import {
-  filenames,
-  generateCustomFiles,
-  generateProject,
-} from "./makecode/utils";
+import { generateCustomFiles, generateProject } from "./makecode/utils";
 import { Confidences, predict, trainModel } from "./ml";
+import { mlSettings } from "./mlConfig";
 import {
+  Action,
+  ActionData,
   DataSamplesView,
   DownloadState,
   DownloadStep,
-  Action,
-  ActionData,
+  EditorStartUp,
   MicrobitToFlash,
   PostImportDialogState,
   RecordingData,
   SaveState,
   SaveStep,
-  TourTrigger,
+  tourSequence,
   TourState,
-  TrainModelDialogStage,
-  EditorStartUp,
+  TourTrigger,
   TourTriggerName,
-  tourSequence,
+  TrainModelDialogStage,
 } from "./model";
+import { renameProject, untitledProjectName } from "./project-name";
 import { defaultSettings, Settings } from "./settings";
+import { getTour as getTourSpec } from "./tours";
 import { getTotalNumSamples } from "./utils/actions";
 import { defaultIcons, MakeCodeIcon } from "./utils/icons";
-import { untitledProjectName } from "./project-name";
-import { mlSettings } from "./mlConfig";
-import { BufferedData } from "./buffered-data";
 import { getDetectedAction } from "./utils/prediction";
-import { getTour as getTourSpec } from "./tours";
-import { createPromise, PromiseInfo } from "./hooks/use-promise-ref";
 
 export const modelUrl = "indexeddb://micro:bit-ai-creator-model";
 
@@ -220,7 +216,6 @@ export interface Actions {
   dataCollectionMicrobitConnected(): void;
 
   loadDataset(actions: ActionData[]): void;
-  loadProject(project: MakeCodeProject, name: string): void;
   setEditorOpen(open: boolean): void;
   recordingStarted(): void;
   recordingStopped(): void;
@@ -663,33 +658,6 @@ 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: MakeCodeProject, name: string) {
-            const newActions = getActionsFromProject(project);
-            set(({ settings }) => {
-              const timestamp = Date.now();
-              return {
-                settings: {
-                  ...settings,
-                  toursCompleted: Array.from(
-                    new Set([...settings.toursCompleted, "DataSamplesRecorded"])
-                  ),
-                },
-                actions: newActions,
-                dataWindow: getDataWindowFromActions(newActions),
-                model: undefined,
-                project: renameProject(project, name),
-                projectEdited: true,
-                appEditNeedsFlushToEditor: true,
-                timestamp,
-                // We don't update projectLoadTimestamp here as we don't want a toast notification for .org import
-              };
-            });
-          },
-
           closeTrainModelDialogs() {
             set({
               trainModelDialogStage: TrainModelDialogStage.Closed,
@@ -1383,26 +1351,3 @@ const getActionsFromProject = (project: MakeCodeProject): ActionData[] => {
   }
   return dataset.data as ActionData[];
 };
-
-const renameProject = (
-  project: MakeCodeProject,
-  name: string
-): MakeCodeProject => {
-  const pxtString = project.text?.[filenames.pxtJson];
-  const pxt = JSON.parse(pxtString ?? "{}") as Record<string, unknown>;
-
-  return {
-    ...project,
-    header: {
-      ...project.header!,
-      name,
-    },
-    text: {
-      ...project.text,
-      [filenames.pxtJson]: JSON.stringify({
-        ...pxt,
-        name,
-      }),
-    },
-  };
-};