Productionise Output only Web Component

sra405 commented 1 month ago

Similar to the embedded view from the site I wanted to see if it was simple enough to add an output only view to the web component.

It's worth noting the need for this in two use cases:

Productionising Block-to-text - we need the ability to pass in code via the code attribute for users to run per step in the activity - draft PR used as the code output runner in the alpha here. As a draft this was sufficient for the alpha, for use in a beta (integrated with the projects site) we'll need to add tests to ensure the functionality works as expected
Editor web component separation - as part of splitting out the editor.raspberrypi.org app and the web component the need to have an output only web component enables the embedded path in the app for integration via iframes
- the editor currently has a embed/viewer path (e.g. here) for use in iframes in external products (e.g. here) - we'll need this to properly separate out the editor-standalone by utilising an output only web component on this path
- all functionality in editor-ui should be in the EmbeddedViewer component
- additional functionality over just running code is needed, this includes:
- ability to obtain code/assets from a project identifier
- inclusion of a file bar at the top of the page (with the ability to choose an alternative file to run)
- inclusion of a built in run CTA rather than an external trigger

Notes

If its easier to do this in parts I'm all ears. The functionality for block to text is there and mostly aligns with what's needed for the standalone. Additionally if we think we can provide the functionality of the embedded viewer path as a web component I'm all ears too, we'd significantly reduce our number of iframe (not to zero unfortunately) but would also unlock performance gains too!

create-issue-branch[bot] commented 1 month ago

Branch issues/1010-Productionise_Output_only_Web_Component created!

floehopper commented 1 month ago

@sra405 I've created this draft PR by doing the following:

Curating the commits from #782 on top of the latest code in the main branch
Checking this new branch works in conjunction with the Block-to-Text app running locally
Adding an e2e spec using the web component to run a simple p5 sketch and display the output
- This uses the page served by src/web-component.js to specify the web component attributes that are used by Block-to-Text
- It also adds a new button to that page to call the rerunCode function on the web component like Block-to-Text
There's a bunch of stuff I'm still a bit unsure about which I'd like to talk through with you when you have time

floehopper commented 1 month ago

@sra405 I've created https://github.com/RaspberryPiFoundation/editor-ui/pull/1030 & https://github.com/RaspberryPiFoundation/editor-standalone/pull/164 to implement the embedded view in editor-standalone using the web component in output-only mode. Note that these also required that we made this change to the Block-to-Text app.

floehopper commented 4 weeks ago

@sra405 I've created #1030 & RaspberryPiFoundation/editor-standalone#164 to implement the embedded view in editor-standalone using the web component in output-only mode. Note that these also required that we made this change to the Block-to-Text app.

@sra405: These PRs are both merged now, so I'm hoping this issue is now resolved. Let me know if you think I've missed anything.

RaspberryPiFoundation / editor-ui

Productionise Output only Web Component #1010

Notes