{"id":13485217,"url":"https://github.com/mizchi/vistree","last_synced_at":"2025-04-28T08:32:33.542Z","repository":{"id":39078746,"uuid":"274665324","full_name":"mizchi/vistree","owner":"mizchi","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-01T12:47:01.000Z","size":456,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T07:51:13.587Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mizchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-24T12:38:57.000Z","updated_at":"2025-02-08T14:09:18.000Z","dependencies_parsed_at":"2022-08-01T07:49:55.394Z","dependency_job_id":null,"html_url":"https://github.com/mizchi/vistree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Fvistree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Fvistree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Fvistree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mizchi%2Fvistree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mizchi","download_url":"https://codeload.github.com/mizchi/vistree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251279630,"owners_count":21564007,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:01:51.482Z","updated_at":"2025-04-28T08:32:32.911Z","avatar_url":"https://github.com/mizchi.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vistree\n\nVisual TypeScript Editing Environment.\n\nEdit code editor and visual editor each other.\n\n[demo](https://zealous-almeida-959860.netlify.app)\n\n## Philosophy and Goal\n\nToday's no-code and low-code miss visual programming infastructure. All visual programming environments have turing complete semantics, after all.\n\nSo as first step of visual programming, we need ast editor and generate both code and UI from its tree.\n\nTypeScript is best choice for general purpose like web(ui) and backend(node.js).\n\n## packages\n\n- `@mizchi/vistree`: Code Renderer\n- `@mizchi/vistree-editable`: Code Renderer with editable UI\n- `workspace`: Playground of `@mizchi/vistree-editable`\n\n## Development\n\n```\nyarn install\nyarn build\nyarn dev\n```\n\n## Deploy\n\n```\n# Install netlify\nyarn deploy\n```\n\n---\n\n# @mizchi/vistree\n\nvisual code editor infrastructure.\n\n## Install\n\n```bash\nnpm install @mizchi/viztree typescript react react-dom styled-components --save\n```\n\n## Example\n\nSimple code renderer.\n\n```tsx\nimport React from \"react\";\nimport ts from \"typescript\";\n\nimport { VisualTree, CodeRenderer, useRendererContext } from \"@mizchi/viztree\";\n\ntype EditableContext = {};\n\nexport function SimpleTree() {\n  const source = ts.createSourceFile(\n    \"/index.ts\",\n    'export const x: string = \"hello\";',\n    ts.ScriptTarget.Latest\n  );\n  return \u003cVisualTree Renderer={Renderer} root={source} context={{}} /\u003e;\n}\n\n// Render tree recursively.\nfunction Renderer({ tree }: { tree: ts.Node }) {\n  // get context\n  const { context } = useRendererContext\u003cEditableContext\u003e();\n  switch (tree.kind) {\n    case ts.SyntaxKind.StringLiteral: {\n      const t = tree as ts.StringLiteral;\n      return \u003cspan style={{ color: \"red\" }}\u003e{t.text} as string\u003c/span\u003e;\n    }\n    default: {\n      return \u003cCodeRenderer tree={tree} /\u003e;\n    }\n  }\n}\n```\n\n## TODO\n\n- [ ] else if\n- [x] BinaryExpression\n- [x] Export\n- [x] Export Default\n- [x] Import\n- [x] Class\n- [x] Object Literal\n- [x] Arrow Function\n- [x] Interface\n- [x] TypeParameters\n- [x] Generics\n- [x] class implements\n- [x] `import { a as b }`\n- [x] ObjectBindingPattern `const {} = {}`\n- [x] ArrayBindingPattern `const {} = {}`\n- [x] `foo!`\n- [x] monorepo\n- [ ] while\n\n## Icebox\n\n- [ ] decolator\n- [ ] generator\n\n## Inspired by...\n\n- https://arcade.makecode.com/\n- [microsoft/pxt\\-blockly: Blockly \\(Microsoft MakeCode fork\\)](https://github.com/microsoft/pxt-blockly)\n- [harukamm/ocaml\\-blockly: OCaml visual programming editor based on Blockly\\.](https://github.com/harukamm/ocaml-blockly)\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizchi%2Fvistree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmizchi%2Fvistree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmizchi%2Fvistree/lists"}