Visual TypeScript Editing Environment.
Edit code editor and visual editor each other.
Today's no-code and low-code miss visual programming infastructure. All visual programming environments have turing complete semantics, after all.
So as first step of visual programming, we need ast editor and generate both code and UI from its tree.
TypeScript is best choice for general purpose like web(ui) and backend(node.js).
@mizchi/vistree
: Code Renderer@mizchi/vistree-editable
: Code Renderer with editable UIworkspace
: Playground of@mizchi/vistree-editable
yarn install
yarn build
yarn dev
# Install netlify
yarn deploy
visual code editor infrastructure.
npm install @mizchi/viztree typescript react react-dom
Simple code renderer.
import React from "react";
import ts from "typescript";
import { VisualTree, CodeRenderer, useRendererContext } from "@mizchi/viztree";
type EditableContext = {};
export function SimpleTree() {
const source = ts.createSourceFile(
"/index.ts",
'export const x: string = "hello";',
ts.ScriptTarget.Latest
);
return <VisualTree Renderer={Renderer} root={source} context={{}} />;
}
// Render tree recursively.
function Renderer({ tree }: { tree: ts.Node }) {
// get context
const { context } = useRendererContext<EditableContext>();
switch (tree.kind) {
case ts.SyntaxKind.StringLiteral: {
const t = tree as ts.StringLiteral;
return <span style={{ color: "red" }}>{t.text} as string</span>;
}
default: {
return <CodeRenderer tree={tree} />;
}
}
}
- else if
- BinaryExpression
- Export
- Export Default
- Import
- Class
- Object Literal
- Arrow Function
- Interface
- TypeParameters
- Generics
- class implements
-
import { a as b }
- ObjectBindingPattern
const {} = {}
- ArrayBindingPattern
const {} = {}
-
foo!
- monorepo
- while
- decolator
- generator
- https://arcade.makecode.com/
- microsoft/pxt-blockly: Blockly (Microsoft MakeCode fork)
- harukamm/ocaml-blockly: OCaml visual programming editor based on Blockly.
MIT