Create ‹dia-livecode› element

[olange]

Features

• Embed a Glitch project in an ‹iframe› with preview/editor/embed modes DONE 05.03 OL
• Control refresh rate with refresh attribute DONE 05.03 OL
• Stop refreshing when refresh attribute is undefined DONE 06.03 OL
• Don't render ‹iframe› when ‹dia-livecode› is hidden DONE 18.03 OL
• Find a way to cache / reuse Glitch project instances
• Distinguish live/non-live modes (see Add a « live » mode to distinguish from after presentation #9)

See also

• Create ‹dia-code› element #8 Create ‹dia-livecode› element
• Add a « live » mode to distinguish from after presentation #9 Add a « live » mode to distinguish from after presentation

[olange]

In live-mode, we should display initial state of examples (almost empty script). In non live-mode, we should present final state of the examples. This would rely on a naming convention of the live-coding projects on Glitch – such as having a final. prefix to the filename being edited; for instance:

• index.html – for live mode, almost empty
• index.final.html – for non-live mode, in finished state
• script.js – for live mode, almost empty
• script.final.js – for non live mode, in finished state

[olange]

For the cache / reuse, an idea: we could have all ‹dia-livecode› instances that share the same name attribute value also share the same ‹iframe› instance.

We would need to detach the ‹iframe› from a ‹dia-livecode› when it goes out of view (and keep it where?); and reattach it to ‹dia-livecode› that appears in view (using the Intersection Observer API?)