Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mizchi/vistree
https://github.com/mizchi/vistree
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/mizchi/vistree
- Owner: mizchi
- Created: 2020-06-24T12:38:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-01T12:47:01.000Z (over 2 years ago)
- Last Synced: 2024-10-30T19:42:54.120Z (14 days ago)
- Language: TypeScript
- Homepage:
- Size: 445 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vistree
Visual TypeScript Editing Environment.
Edit code editor and visual editor each other.
[demo](https://zealous-almeida-959860.netlify.app)
## 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
```bash
npm install @mizchi/viztree typescript react react-dom styled-components --save
```
## Example
Simple code renderer.
```tsx
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 ;
}
// Render tree recursively.
function Renderer({ tree }: { tree: ts.Node }) {
// get context
const { context } = useRendererContext();
switch (tree.kind) {
case ts.SyntaxKind.StringLiteral: {
const t = tree as ts.StringLiteral;
return {t.text} as string;
}
default: {
return ;
}
}
}
```
## TODO
- [ ] else if
- [x] BinaryExpression
- [x] Export
- [x] Export Default
- [x] Import
- [x] Class
- [x] Object Literal
- [x] Arrow Function
- [x] Interface
- [x] TypeParameters
- [x] Generics
- [x] class implements
- [x] `import { a as b }`
- [x] ObjectBindingPattern `const {} = {}`
- [x] ArrayBindingPattern `const {} = {}`
- [x] `foo!`
- [x] monorepo
- [ ] while
## Icebox
- [ ] decolator
- [ ] generator
## Inspired by...
- https://arcade.makecode.com/
- [microsoft/pxt\-blockly: Blockly \(Microsoft MakeCode fork\)](https://github.com/microsoft/pxt-blockly)
- [harukamm/ocaml\-blockly: OCaml visual programming editor based on Blockly\.](https://github.com/harukamm/ocaml-blockly)
## LICENSE
MIT