Open Source · TypeScript · basiert auf Google Blockly

Eine Definition, viele Darstellungen.

Morphic Blocks ist eine einbettbare TypeScript-Bibliothek auf Basis von Google Blockly. Ein einziges Blockmodell wird in so vielen Repräsentationen dargestellt, wie Sie definieren, von Symbolen bis zu echtem Quelltext.

Zur Dokumentation Playground ausprobieren Auf GitHub ansehen

npm install morphic-blocks

Auf npm ansehen →

Dieselbe Anweisung, drei Modi

Simple

Pseudo

Syntax-JS

Ein Block, viele Modi

Ein einzelner Morphic Block trägt mehrere visuelle Elemente: Symbole, sprachliche Beschriftungen und Code-Vorlagen. Die Modi bestimmen, welche davon sichtbar sind, und lassen sich zur Laufzeit umschalten, ohne neu einzubinden.

Deklarativ und konfigurationsgesteuert

Blöcke in JSON, Verhalten in TypeScript und eine CSS-Datei pro Modus. Eine Umgebung wird über die Konfiguration erweitert oder umgestaltet, nicht über Blocklys imperatives Setup mit vielen Dateien.

Für den Übergang gemacht

Stellen Sie dasselbe Programm als Symbole, Blöcke oder Text dar und begleiten Sie damit den schrittweisen Weg vom block- zum textbasierten Programmieren, mit einem Framework über viele Lernstufen hinweg.

Schnellstart

Paket installieren, Definitionen und Verhalten übergeben, einbinden.

Das ist der gesamte Ablauf. Die Dokumentation behandelt Modi, Toolbox, Codespace und Verhalten im Detail.

Zur vollständigen Anleitung →

main.ts

import { MorphicBlocks } from "morphic-blocks";
import definitions from "./definitions.json";
import { behaviors } from "./behaviors";

// The constructor takes the whole definitions file plus your behaviors.
const engine = new MorphicBlocks(definitions, behaviors);

engine.mount({
  workspaceContainer: document.getElementById("workspace")!,
  workspaceMode: "conceptual",
  toolboxMode: "conceptual",
});

engine.mountToolbox(document.getElementById("toolbox")!);

// Switch representation at runtime; the same blocks re-render.
engine.setModes({ workspaceMode: "python", toolboxMode: "python" });

definitions.json

{
  "elementTypes": {
    "title":      "text",
    "conceptual": "code",
    "python":     "code"
  },
  "modes": [
    { "name": "conceptual", "elements": ["title", "conceptual"] },
    { "name": "python",     "elements": ["title", "python"] }
  ],
  "blocks": [
    {
      "identifier": "text_print",
      "elements": {
        "title":      "Print",
        "conceptual": "Output %1",
        "python":     "print(%1)"
      },
      "inputSlots": {
        "1": { "kind": "value", "name": "TEXT" }
      }
    }
  ]
}

behaviors.ts

import type { MorphicBehaviorMap } from "morphic-blocks";

// One function per block identifier, returning the executable JavaScript.
export const behaviors: MorphicBehaviorMap = {
  text_print(proxy) {
    return `console.log(${proxy.inputs.TEXT ?? "undefined"});\n`;
  },
};

So sieht es aus

Playground ausprobieren