Makecode Embedded integration

[r59q]

Determine the work required for the ml-trainer equivalent makecode integration

Investigation

• Add the makecode-embed library
• Determine if it should be embedded within the 'mainContent' window or it should be a page by itself
• (If it should take up the entire page, like with ML-Trainer) Create a exceptional route in the router that fills the entire page
• Create a MakeCodeProject from the current state of the application
• Create an "extension" that can be used inside of the embedded makecode, there's probably something we can borrow from ML-Trainer
• Use the block rendering to display the configuration on the model page instead of the current threshold logic

Implementation

See the dev-makecode-embed branch for reference implementations

• Add the makecode-embed library
• Add /makecode path
• Add ml machine extension
• Insert makecode embed iframe
• Move the makecode frame driver to controller
  • WontDo - it's too tied to the UI
  • Alternative, create a FrameBuilder or some other way to move the native js away from Svelte framework code
• Add back button to embedded makecode
• Move navigation into backend interface, replace in makecode controller
  • Leave it in the frontend and pass in event handlers to the frambuilder
• Add 'to makecode' button on output page
• Put FeatureToggle in interface-controller
  • Load the features when ML-Machine is instantiated
• Add makecode override state
• Add blocks renderer to makecode output page view
• Save MakeCode project
  • Create MakeCodeRepository
  • Create MakeCodeService
  • Load saved MakeCode project from repository

Potential further work (Solution for #637)

• Generate project files instead of using extension

[r59q]

It seems they depend on @microbit/makecode-embed. Some docs using vanilla
https://microbit-foundation.github.io/makecode-embed/documents/VanillaJS_Usage.html

It's also available for React

[r59q]

Using the makecode-embed lib it would be possible to embed the makecode editor directly into MLM

[r59q]

Notes from meeting:

• Should only support v2 micro:bit, if it's v1, make it grayed-out
• If possible, when entering "makecode mode" convert the current LED matrix selection to the makecode equivalent blocks
  • Skip sound and pin if it's time consuming
• Include the name when making the makecode project for embedding
• Start by embedding it into the view
• Put block rendering in the bottom of the model page, when switched to makecode mode

[r59q]

It took a while, because the documentation is sparse, but i found out that the controller(integer) parameter in createMakeCodeURL can be used to configure how the embedded frame looks

Setting it to 2, shows the back button