v0.4.0

Breaking changes

0.4.0 changes how views are set up and what they show. Every old option fails at mount() with a message that names the new one, so an app can be moved over step by step.

Views show a code element, modes are for tiles. Views are declared by name in the definitions and show a code element (python), not a mode. A file without views gets two, named workspace and codespace.

// 0.3
{ "presets": [{ "name": "text", "toolbox": { "mode": "py", "render": { "python": "text" } },
                "codespace": "py", "preview": "js" }] }

// 0.4, with the recommended names (see Naming below)
{
  "modes": [{ "name": "python-text-tiles", "elements": ["title", "python"], "render": { "python": "text-based" } }],
  "views": {
    "text-pane": "codespace",
    "read-pane": { "kind": "codespace", "editable": false }
  },
  "presets": [{ "name": "text-preset", "toolbox": "python-text-tiles", "views": { "text-pane": "python", "read-pane": "javascript" } }]
}

engine.mount({ containers: { "text-pane": textElement, "read-pane": readElement } });

Definitions

• A preset's toolbox: { mode, render } → toolbox: "<mode>", and render on that mode
• render values "block", "text" → "block-based", "text-based"
• A preset's workspace, codespace, preview keys → views: { <view>: <code element> }
• A preview → a view { "kind": "codespace", "editable": false }

App code

• setModes({ … }) → show({ toolbox: <mode>, views: { <view>: <element> } })
• previewContainer → containers: { "read-pane": element } and a declared view (workspaceContainer and codespaceContainer still work, for the default views)
• toolbarContainers → toolbars: { <view>: element }
• previewTheme → themes: { <view>: theme }
• The mount option codespace: { delete } → delete on the codespace's view
• getWorkspaceMode(), getCodespaceMode(), getPreviewMode(), getViewMode() → getViewElement(view), getToolboxMode()
• setCodespaceTheme(), setPreviewTheme() → setViewTheme(view, theme)
• mountCodespace(), mountPreview() → declared views, or addView()
• addView({ kind: "preview", mode }) → addView({ kind: "codespace", editable: false, element })
• A view handle's getMode(), setMode() → getElement(), show(element)
• Added workspaces are editable by default; editable: false makes one read only
• toolbarItems.modeLabel() → toolbarItems.viewLabel()
• Toolbar pane, ctx.pane, data-morphic-pane → view, ctx.kind, data-morphic-kind
• A behavior's context.mode, proxy.mode → context.element, proxy.element (a tile's context keeps mode)
• In onPresetApplied, preset.views says which views the preset shows

CSS

• .morphic-workspace-root.morphic-mode-py → .morphic-workspace-root.morphic-shows-python
• .morphic-codespace-root.morphic-mode-py → .morphic-codespace-root.morphic-shows-python
• .morphic-preview-root → .morphic-codespace-root.morphic-read-only
• Tiles keep morphic-mode-<mode>. New: morphic-view-<name>, morphic-preset-<name>
• Names go into classes as written: a mode iconTiles gives morphic-mode-iconTiles (before: morphic-mode-icontiles), a category Output gives data-category="Output" (before: "output"). Only characters a class cannot hold become -. Lowercase names keep their classes

New

• Views: any number of workspaces and codespaces, declared by name; each workspace can edit the program; rtl per view (Presets & Views)
• %1:type writes the type of a slot's value, named per language in code.<element>.types (Definitions Format)
• Dropdowns: images or colors as choices, and menu classes for app CSS (Definitions Format)
• Custom elements: a fourth element type the app draws on tiles, e.g. info or read aloud buttons (Blocks & Elements)
• Spoken tile labels: toolbox.label names tiles for screen readers after a chosen element (Custom Toolbox)
• Toolbox categories: headings, collapsing, tabs, and a hidden scrollbar with fading edges
• Codespace: delete the blocks of all selected lines, from the keyboard or the toolbar, each way can be turned off; groups of blocks are marked for CSS
• Toolbar copy takes only the selected block's text
• Resizable panes: arrow keys, Home and End, and screen reader support for makeResizable (Resizable Panes)
• Blockly's media is copied by one bundler plugin line (morphic-blocks/vite, /webpack, /rspack, /rollup, /esbuild) (Privacy)
• Themes: ready-made code view themes in the new package @morphicblocks/themes (Themes)
• Naming checks: warnings for a framework word as a name (workspace, block, code, …), a name used for two kinds, and characters a CSS class cannot hold; recommended names on the new Naming page
• Errors & Warnings: every check with an example message and its fix (Errors & Warnings)

Fixes

• Without a workspace on the page, a codespace switches to the element show() gives it, and the hidden program keeps the element the preset gives the declared workspace
• A mode's render for a code element it adds later through setModeElements() no longer warns
• A block dropped on a codespace value keeps the old value inside it
• Deleting a line in the codespace deletes the block it belongs to
• The text views measure again when their lines change size
• The media plugin serves the copied files on the first Vite start
• Code shown as text on tiles counts toward the toolbox width