Skip to content

Commit ec6fa54

Browse files
microbit-robertmicrobit-robert
authored
Improve MakeCode robustness (#552)
Fix for clicking on "Edit in MakeCode" button immediately after page refresh
1 parent 9ad75bd commit ec6fa54

File tree

4 files changed

+41
-49
lines changed

4 files changed

+41
-49
lines changed

‎src/hooks/project-hooks.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ export const ProjectProvider = ({
135135

136136
const project = useStore((s) => s.project);
137137
const editorReadyPromiseRef = usePromiseRef<void>();
138+
const editorContentLoadedPromiseRef = usePromiseRef<void>();
138139
const initialProjects = useCallback(() => {
139140
logging.log(
140141
`[MakeCode] Initialising with header ID: ${project.header?.id}`
@@ -146,13 +147,24 @@ export const ProjectProvider = ({
146147
const startUpTimeout = 90000;
147148
const startUpTimestamp = useRef<number>(Date.now());
148149

149-
const onWorkspaceLoaded = useCallback(() => {
150+
const onWorkspaceLoaded = useCallback(async () => {
150151
logging.log("[MakeCode] Workspace loaded");
151-
152+
await editorContentLoadedPromiseRef.current.promise;
152153
// Get latest start up state and only mark editor ready if editor has not timed out.
153154
getEditorStartUp() !== "timed out" && editorReady();
154155
editorReadyPromiseRef.current.resolve();
155-
}, [editorReady, editorReadyPromiseRef, getEditorStartUp, logging]);
156+
}, [
157+
editorContentLoadedPromiseRef,
158+
editorReady,
159+
editorReadyPromiseRef,
160+
getEditorStartUp,
161+
logging,
162+
]);
163+
164+
const onEditorContentLoaded = useCallback(() => {
165+
logging.log("[MakeCode] Editor content loaded");
166+
editorContentLoadedPromiseRef.current.resolve();
167+
}, [editorContentLoadedPromiseRef, logging]);
156168

157169
const checkIfEditorStartUpTimedOut = useCallback(
158170
async (promise: Promise<void> | undefined) => {
@@ -432,6 +444,7 @@ export const ProjectProvider = ({
432444
onWorkspaceSave,
433445
onDownload,
434446
onBack,
447+
onEditorContentLoaded,
435448
onWorkspaceLoaded,
436449
},
437450
}),
@@ -448,6 +461,7 @@ export const ProjectProvider = ({
448461
onWorkspaceSave,
449462
onDownload,
450463
onBack,
464+
onEditorContentLoaded,
451465
onWorkspaceLoaded,
452466
]
453467
);

‎src/makecode/__snapshots__/utils.test.ts.snap‎

Lines changed: 10 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5267,33 +5267,16 @@ namespace ml {
52675267
}
52685268
]
52695269
}",
5270-
"main.blocks": "<xml xmlns="https://developers.google.com/blockly/xml"><variables></variables>
5271-
<block type="ml_on_event_start" x="0" y="0">
5272-
<field name="event">ml.event.Still</field>
5273-
<statement name="HANDLER">
5274-
<block type="basic_show_icon"><field name="i">IconNames.Asleep</field></block>
5275-
</statement>
5276-
</block>
5277-
5278-
5279-
<block type="ml_on_event_start" x="0" y="180">
5280-
<field name="event">ml.event.Wave</field>
5281-
<statement name="HANDLER">
5282-
<block type="basic_show_icon"><field name="i">IconNames.Rabbit</field></block>
5283-
</statement>
5284-
</block>
5285-
5286-
5287-
<block type="ml_on_event_start" x="0" y="360">
5288-
<field name="event">ml.event.Clap</field>
5289-
<statement name="HANDLER">
5290-
<block type="basic_show_icon"><field name="i">IconNames.EighthNote</field></block>
5291-
</statement>
5292-
</block>
5293-
</xml>",
5294-
"main.ts": "ml.onStart(ml.event.Still, function () {basic.showIcon(IconNames.Asleep)})
5295-
ml.onStart(ml.event.Wave, function () {basic.showIcon(IconNames.Rabbit)})
5296-
ml.onStart(ml.event.Clap, function () {basic.showIcon(IconNames.EighthNote)})
5270+
"main.blocks": "<xml xmlns="https://developers.google.com/blockly/xml"><variables></variables><block type="ml_on_event_start" x="0" y="0"><field name="event">ml.event.Still</field><statement name="HANDLER"><block type="basic_show_icon"><field name="i">IconNames.Asleep</field></block></statement></block><block type="ml_on_event_start" x="0" y="180"><field name="event">ml.event.Wave</field><statement name="HANDLER"><block type="basic_show_icon"><field name="i">IconNames.Rabbit</field></block></statement></block><block type="ml_on_event_start" x="0" y="360"><field name="event">ml.event.Clap</field><statement name="HANDLER"><block type="basic_show_icon"><field name="i">IconNames.EighthNote</field></block></statement></block></xml>",
5271+
"main.ts": "ml.onStart(ml.event.Still, function () {
5272+
basic.showIcon(IconNames.Asleep)
5273+
})
5274+
ml.onStart(ml.event.Wave, function () {
5275+
basic.showIcon(IconNames.Rabbit)
5276+
})
5277+
ml.onStart(ml.event.Clap, function () {
5278+
basic.showIcon(IconNames.EighthNote)
5279+
})
52975280
",
52985281
"pxt.json": "{"name":"A project name","description":"","dependencies":{"core":"*","microphone":"*","radio":"*","machine-learning":"github:microbit-foundation/pxt-microbit-ml#v1.0.2"},"files":["main.ts","main.blocks","autogenerated.ts","dataset.json","pxt.json","README.md"],"preferredEditor":"blocksprj"}",
52995282
},

‎src/makecode/generate-main-scripts.test.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,14 @@ import { getMainScript } from "./generate-main-scripts";
1212

1313
describe("test generateMainScripts", () => {
1414
it("generates xml blocks", () => {
15-
const expected = `<xml xmlns="https://developers.google.com/blockly/xml"><variables></variables>
16-
<block type="ml_on_event_start" x="0" y="0">
17-
<field name="event">ml.event.Name</field>
18-
<statement name="HANDLER">
19-
<block type="basic_show_icon"><field name="i">IconNames.Heart</field></block>
20-
</statement>
21-
</block>
22-
</xml>`;
15+
const expected = `<xml xmlns="https://developers.google.com/blockly/xml"><variables></variables><block type="ml_on_event_start" x="0" y="0"><field name="event">ml.event.Name</field><statement name="HANDLER"><block type="basic_show_icon"><field name="i">IconNames.Heart</field></block></statement></block></xml>`;
2316
const actions: Action[] = [{ name: "name", icon: "Heart", ID: 12 }];
2417
expect(getMainScript(actions, "blocks")).toEqual(expected);
2518
});
2619

2720
it("generates js", () => {
2821
const expected =
29-
"ml.onStart(ml.event.Name, function () {basic.showIcon(IconNames.Heart)})";
22+
"ml.onStart(ml.event.Name, function () {\n basic.showIcon(IconNames.Heart)\n})";
3023
const actions: Action[] = [{ name: "name", icon: "Heart", ID: 12 }];
3124
expect(getMainScript(actions, "javascript")).toContain(expected);
3225
});

‎src/makecode/generate-main-scripts.ts‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,16 @@ interface BlockPos {
1515
y: number;
1616
}
1717

18-
const onMLEventBlock = (name: string, children: string, pos: BlockPos) => `
19-
<block type="ml_on_event_start" x="${pos.x}" y="${pos.y}">
20-
<field name="event">ml.event.${name}</field>
21-
<statement name="HANDLER">
22-
${children}
23-
</statement>
24-
</block>
25-
`;
18+
const onMLEventBlock = (name: string, children: string, pos: BlockPos) => {
19+
let code = "";
20+
code += `<block type="ml_on_event_start" x="${pos.x}" y="${pos.y}">`;
21+
code += `<field name="event">ml.event.${name}</field>`;
22+
code += '<statement name="HANDLER">';
23+
code += children;
24+
code += "</statement>";
25+
code += "</block>";
26+
return code;
27+
};
2628

2729
type Language = "blocks" | "javascript";
2830

@@ -38,7 +40,7 @@ const statements: Record<Language, LanguageStatements> = {
3840
javascript: {
3941
wrapper: (children) => children + "\n",
4042
showLeds: (ledPattern) => `basic.showLeds(\`${ledPattern}\`)`,
41-
showIcon: (iconName) => `basic.showIcon(IconNames.${iconName})`,
43+
showIcon: (iconName) => `\n basic.showIcon(IconNames.${iconName})\n`,
4244
clearDisplay: () => "basic.clearScreen()",
4345
onMLEvent: (name, children) => {
4446
return `ml.onStart(ml.event.${name}, function () {${children}})`;
@@ -80,6 +82,6 @@ export const getMainScript = (actions: Action[], lang: Language) => {
8082
y: initPos.y + idx * 180,
8183
})
8284
)
83-
.join("\n")
85+
.join(lang === "javascript" ? "\n" : "")
8486
);
8587
};

0 commit comments

Comments
 (0)