vistree

July 6, 2020 ยท View on GitHub

Visual TypeScript Editing Environment.

Edit code editor and visual editor each other.

demo

Philosophy and Goal

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).

packages

  • @mizchi/vistree: Code Renderer
  • @mizchi/vistree-editable: Code Renderer with editable UI
  • workspace: Playground of @mizchi/vistree-editable

Development

yarn install
yarn build
yarn dev

Deploy

# Install netlify
yarn deploy

@mizchi/vistree

visual code editor infrastructure.

Install

npm install @mizchi/viztree typescript react react-dom styled-components --save

Example

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} />;
    }
  }
}

TODO

  • 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

Icebox

  • decolator
  • generator

Inspired by...

LICENSE

MIT