Edrys Reference Module

A module for developers of Edrys modules. Add it to any class to see what the Edrys module API hands a module, to send and inspect messages, and to try out the shared state API live. It is plain files without a build step (index.html, style.css, script.js; Alpine.js, water.css, CodeMirror), so it is also a small example to start a new module from.

The module follows the classroom's light or dark theme (the operating system's when opened on its own): it loads the shared edrys-module.css after water.css, and its example editor takes the --edrys-* code colours from it (.cm-s-edrys in style.css).

Usage

Add this URL to your class (Settings → Modules):

https://edrys-labs.github.io/module-reference/

It is shown everywhere (show-in: *): lobby, rooms and stations, for every role.

What it shows

The header shows whether Edrys is ready, and your role and room. Below it are three tabs; the last one you opened is remembered in your browser.

Data: what Edrys.onUpdate delivers to the module.

• You: Edrys.username, the live user's display name and room, and Edrys.role.
• Module: from Edrys.module the URL, where the module is shown, config and the config of the current role (studentConfig, teacherConfig or stationConfig).
• People: everyone in the class (Edrys.liveClass.users), with role, room, join time, raised hand and number of connections.

Messages

• Sends Edrys.sendMessage(subject, body) to everyone in the room, or to one user (Edrys.sendMessage(subject, body, username)).
• Lists the messages that arrive with time, sender (display name and username), subject, body (objects are shown as JSON) and sending module. The tab counts them. By default it listens with Edrys.onMessage(handler, true) (promiscuous), so it shows messages from all modules in the room, which helps to debug how modules talk to each other (e.g. an editor sending execute to a terminal). Untick the checkbox to see only messages from this module's URL, which is onMessage's default. The newest 200 messages are kept.

State

• Playground: a local (not synced) editor with an example of the state API: getState with Map, Value and Awareness, updateState transactions and clearState. Eval runs it and shows the value of the last line, or the error, below the editor.
• Room state: the live state of your room, as JSON. It updates for every peer when anyone changes it.
• Other rooms: the state of the other rooms, collapsed.

Keep in mind that the room state is one Yjs Map per room, shared by all modules in that room. Prefix your keys with your module's name; the example uses reference.demo and reference.counter.

Configuration

Everything you enter in the module's settings is displayed in the Data tab, so you can see how Edrys passes it on (JSON is parsed, anything else stays a string). The module declares a small module-config as an example of the settings form, one field per config with a different field type each. The fields have no effect besides being displayed:

Config	Field	Type	Meaning
config	note	text-area	Any text, shown to every role
studentConfig	level	select	beginner or advanced, shown to students
teacherConfig	verbose	boolean	Example flag, shown to teachers
stationConfig	bench	number	Example number (e.g. the lab bench), shown to stations

{ "note": "Hello class" }

A select lists its choices in options:

<meta
  name="module-config"
  content="{
    'studentConfig': {
      'level': {
        'type': 'select',
        'options': ['beginner', 'advanced'],
        'hint': 'Example choice, shown to students in the Data tab'
      }
    }
  }"
/>

Note that every role's iframe receives all configs, including teacherConfig: don't put secrets there.

The module sends no messages and writes no state on its own, only when you press Send message or Eval.

License

MIT © edrys-labs