`code`

[salmenf]

ww-code (or originally ww-code-cell) is the first widget for WebWriter that was made by a student. We still need to do a lot of work to make it usable in WebWriter.

Package:

• [x] Rename widget/package from ww-code-cell to ww-code
• [x] Add a short description
• [x] Remove keyword 'webwriter' (keep keyword 'webwriter-widget')
• [x] Change version to 0.x.x (we should only use 1.x.x or higher if the widget is released to end users

Integration:

• [x] Make widget display on website (https://webwriter.app/widgets)
• [x] Make widget run in WebWriter (some weird errors regarding "coderunner" - why is coderunner an attribute?)

Features:

• [x] Allow saving the widget (the widget's state must be serialized into HTML attributes for this)
• [x] Support printable (force light mode, hide buttons and hide all styling based on interaction, selection, etc.)

UI:

• [x] Remove card background, border, etc - minimal design
• [x] Move options to the right with part=action and adjust options layout accordingly
• [x] Make light mode the default
• [x] Toggles should actually be toggles, not buttons
• [x] Change line disabling feature: Show small button next to each line number to disable lines, and style the whole line as uneditable, not only the text content

[salmenf]

Some might be fixed already in Jorik's local version, just listing all I noticed in ww-code@0.2.0:

• [x] *Allow code execution (typo)
• [x] Switching the exercise type does not work ("No exercise type" is always selected)
• [x] Visual glitch on border of editor outline
• [ ] Show lock button preview when hovering over the line gutter
• [x] HTML preview iframe sizing (this is just from our meeting, it's not in 0.2.0)
• [x] Optimize vertical spacing even more:
  • [x] Move language selection into the bar with "run" and "save", still aligned right
  • [x] Remove horizontal rule/line between selection of exercise type and the toggles
• [x] Remove "Result: " -> Just show the result of there is one
• [x] The run and save buttons should be styled differently on :hover and on :active, same for the language selection
• [x] If code execution is not possible for the language, the run button should be greyed out and disabled

[salmenf]

Look into Python code execution with Pyodide:

• [x] Can we make it run in the WebWriter environment?
• [x] How big is the overhead in terms of space (MB loaded) and time (loading before Python execution is ready)?
• [x] Prototype to test these aspects

Blob URLs for dependencies of Pyodide?

[salmenf]

See https://github.com/webwriter-app/ww-image/issues/1#issuecomment-1652124561

[salmenf]

We need to prepare the code widget for use in the Explorable JS WebTech course:

• [x] Add execution count: How many times was the code run?
• [x] Add switch for running globally (access variables from other code cells) or isolated (access only variables from this scope)
• [x] Remove "save" workaround in widget UI
• [x] Remove/disable Python for now (so it is not bundled and increases the size of the widget)
• [x] Add button to clear output
• [x] Remove theming option

[K1R0J]

JS Code execution now uses Function() instead of eval(). Therefore to see the result someone has to return it. To access the global variables, use this for initial definition

[salmenf]

Thanks for the update! I found some issues and have further ideas:

• [x] Global execution doesn't seem to work.
  1. Add a code cell with var x = 1, switch to global execution, run.
  2. Add another code cell with return x, switch to global execution, run.
  3. Returns an error x is not defined.
• [x] Local execution should also capture console output (log, warning, error) and output it.
• [x] Running 1 + 1 globally or locally produces no output. It should produce 2 in both cases. For the local context, it may be necessary to add a return to the last line. This could be tricky since the last line may be any kind of code -> detect if it's an expression, if so, add a return. I think you'd need to parse the code snippet for this: https://github.com/acornjs/acorn/tree/master/acorn/
• [x] Running globally should simply be labelled Run (since it's the expected default from Jupyter), running locally could be called Run in isolation
• [x] Running globally should be enabled by default, changing the language & execution count & execution time should be disabled by default (keep a minimal default)
• [x] Pasting code inserts it twice

[salmenf]

• [x] Option to enable type=module attribute on script tag (on JS global execution) -> This would allow URL-based imports like import mymodule from 'https://...mysite.../myscript.js'
• [x] Add TypeScript support
  • [x] CodeMirror language support
  • [x] global/local execution
  • [ ] output and errors (including type errors)
  • Possible solution A: ts.transpileModule (not sure if we can get type errors out of this)
  • Possible solution B: rollup + @rollup/plugin-typescript
• [ ] Add WebAssembly support
  • [x] CodeMirror language support
  • [ ] execution
  • [ ] output and errors
  • This should be straightforward (Put cell contents into a blob resource maybe, then use the browser API to run: https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running)
• [x] Allow authors to define dependent code cells
  • (If I run A, run B first - this could also be chained, B may require C)
  • One-to-many: Running A requires B, C, ...
  • Idea: Allow naming and importing other code cells (this is way more explicit and easy to understand!)
  • Each code widget could write to a <script type="importmap"> in the head and map a code cell name to a blob URL, for example "geometry": "blob:..." to enable import {Square} from "geometry" in code cell. It's questionable if this is possible in other languages than JS, though. Maybe this is a special feature for JS code cells?
• [x] Add autorun for cells
• [x] Hidden on student view

[salmenf]

• [ ] Re-enable Python support, update Pyodide and test it
• [ ] Change architecture so code is run in Web Worker by default (separate, isolated thread) -> Similar to "VM" idea by Philipp L. (https://github.com/webwriter-app/block-based-code/blob/webwriter-release/lib/types/vm.ts)
• [ ] WebAssembly Text Format support: Need to compile "WAT" to "WASM" and run it, then show the output (https://github.com/WebAssembly/wabt/tree/main/docs/demo/wasm2wat)