netease / tango

A source code based low-code builder. Integrate low-code experience into your local development workflow seamlessly.

Tango LowCode Builder

A source code based low-code builder.

English | 简体中文

📄 Documentation

You can view the detailed usage guide through the following links:

• Document site: https://netease.github.io/tango-site/
• Playground application: https://tango-demo.musicfe.com/designer/

✨ Features

• Tested in the production environment of NetEase Cloud Music, can be flexibly integrated into low-code platforms, local development tools, etc.
• Based on source code AST, with no private DSL and protocol Real-time code generation capability, supporting source code in and source code out
• Out-of-the-box front-end low-code designer, providing flexible and easy-to-use designer React components
• Developed using TypeScript, providing complete type definition files

🎯 Milestone

gantt
    dateFormat  YYYY-MM-DD
    title       Tango 1.0 Milestones
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section Builder Release
    1.0 Alpha  : m1, 2023-10-01, 2024-01-31
    1.0 RC     : m2, 2024-02-01, 2024-04-30
    1.0 Stable : m3, 2024-04-30, 2024-12-31

Note

Alpha versions will continue to optimize some implementation protocols and continuously integrate new features from the internal version of NetEase; RC versions will provide a stable parsing protocol and implementation; The 1.0 official version is planned to be released in Q2 2024. After the release of the 1.0 official version, we will continue to iterate on versions and gradually incorporate core capabilities such as process design, component library, and AIGC from the internal version.

🌐 Compatibility

• Modern browsers（Chrome >= 80, Edge >= 80, last 2 safari versions, last 2 firefox versions）

💻 Development

Environment

• Node >= 18
• Yarn >= 1.22 && < 2

Development Quick Start

# clone the repo
git clone https://github.com/NetEase/tango.git

# enter the project root
cd tango

# install dependencies
yarn

# start the designer playground app
yarn start

💬 Community

Join NetEase Tango Community to share your ideas, suggestions, or questions and connect with other users and contributors.

• Discord: https://discord.gg/B6hkGTe4Rz
• Usage Trends

🤝 Contributing

Please read the github contribution guide first。

• Clone the repository
• Create a branch
• Commit and push your code
• Open a Pull Request

💗 Acknowledgments

Thanks to the NetEase Cloud Music Front-end team, Public Technology team, Live Broadcasting Technology team, and all the developers who participated in the Tango project.

Thank you to CodeSandbox for providing the Sandpack project, which provides powerful online code execution capabilities for Tango.

📣 Product Promotion

Don't waste your time restoring the UI, try the NetEase Cloud Music "Seal D2C" development tool! Easily turn your design into code, support React, RN, Vue, WeChat apps and other multi-end scenarios, what you see is what you get!

Experience "Seal D2C" now:

• I'm a Figma user: https://www.figma.com/community/plugin/1174548852019950797/seal-figma-to-code-d2c/
• I'm a MasterGo user: https://mastergo.com/community/plugin/98956774428196/

📄 License

This project is licensed under the terms of the MIT license

tango's Issues

沙箱能起来 但是报错

首先感谢网易音乐云团队的服务

看这像是环境变量的问题，具体怎么解决啊 大佬

项目中使用的vue3 + element-plus 组件的二次封装， 具体怎么修改成 vue3 项目，希望大佬说一下思路

Tango Playground演示站点 https://s5.music.126.net/static_public/* 请求资源404

这个项目的使用流程是什么?

拖拉拽得到一份react 项目源码 ? 然后 push 到 github, 再通过 ci cd 发布, 再通过 iframe 嵌入到现在项目的某一块吗?

本地启动失败

tango和codesanbox 必须同源。否则codesanbox iframe中的window无法再tango环境里读取，如果无法读取,左边的物料面板是加载不全的

官方文档却介绍一个放在https://local.netease.com:6006(tango) 一个放在https://local.netease.com:8443(codesanbox)

使用caddy托管后，无法使用https://local.netease.com:8443/访问，只能使用http://local.netease.com:2019/或者http://localhost:2019访问

更改了Caddyfile中的:8080为local.netease.com
使用caddy托管后，无法使用https://local.netease.com:8443/访问，只能使用http://local.netease.com:2019/或者http://localhost:2019访问，访问效果及日志如下

2023/11/01 09:40:12.310 INFO using adjacent Caddyfile
2023/11/01 09:40:12.312 WARN Caddyfile input is not formatted; run 'caddy fmt --overwrite' to fix inconsistencies {"adapter": "caddyfile", "file": "Caddyfile", "line": 3}
2023/11/01 09:40:12.324 INFO admin admin endpoint started {"address": "localhost:2019", "enforce_origin": false, "origins": ["//localhost:2019", "//[::1]:2019", "//127.0.0.1:2019"]}
2023/11/01 09:40:12.326 INFO tls.cache.maintenance started background certificate maintenance {"cache": "0xc0004bc100"}
2023/11/01 09:40:12.326 INFO http.auto_https server is listening only on the HTTPS port but has no TLS connection policies; adding one to enable TLS {"server_name": "srv0", "https_port": 8443}
2023/11/01 09:40:12.326 WARN http.auto_https automatic HTTP->HTTPS redirects are disabled {"server_name": "srv0"}
2023/11/01 09:40:12.327 INFO http enabling HTTP/3 listener {"addr": ":8443"}
2023/11/01 09:40:12.327 INFO tls cleaning storage unit {"description": "FileStorage:/Users/01407142/Library/Application Support/Caddy"}
2023/11/01 09:40:12.328 INFO http.log server running {"name": "srv0", "protocols": ["h1", "h2", "h3"]}
2023/11/01 09:40:12.328 INFO http enabling automatic TLS certificate management {"domains": ["local.netease.com"]}
2023/11/01 09:40:12.330 INFO tls finished cleaning storage units
2023/11/01 09:40:12.330 WARN tls stapling OCSP {"error": "no OCSP stapling for [local.netease.com]: no OCSP server specified in certificate", "identifiers": ["local.netease.com"]}
2023/11/01 09:40:12.333 INFO pki.ca.local root certificate is already trusted by system {"path": "storage:pki/authorities/local/root.crt"}
2023/11/01 09:40:12.334 INFO autosaved config (load with --resume flag) {"file": "/Users/01407142/Library/Application Support/Caddy/autosave.json"}
2023/11/01 09:40:12.334 INFO serving initial configuration

运行环境能确认能跑再发吗

fatal - AssertionError [ERR_ASSERTION]: Invalid config keys: devServer

《云音乐低代码 + ChatGPT 实践方案》这部分会考虑加入开源吗？

https://zhuanlan.zhihu.com/p/634096142
看了这个文章，找到了这个低代码开源项目，发现好像没有GPT那一部分，想问下那一部分会考虑加入开源吗？

文档建设需求

1. 架构体系设计说明
2. 很多代码中文注释不全
3. 低代码开发文档
4. 二次开发扩展手册
5. 路线图

是否可以将sandbox部署在相对路径上

目前sandbox是部署在根目录下，资源也是通过绝对路径加载的，导致部署在相对路径（比如/sandbox/）会失败。
但部署在根目录就需要有一个单独的域名。

去codesandbox-client那边搜索了一下，也有相应的issue但没有提供好的解决方案，想知道这边有没有比较好的方案可以参考。

物料协议 - 如何根据其他属性改变当前属性的值？

如何根据其他属性改变当前属性的值？ 例如我希望在x属性值改变后触发y属性的检查和更新

codesandbox-client协议是GPLV3，如何进行商业化？

这个框架用的codesandbox-client是GPLV3的，那这个框架也得是GPLV3的，如何进行商业化？

震惊和我想做的低码出奇的一致

和我想做的低码出奇的一致，做前端的增强开发工具，并且可以导出源码，给其他系统做集成。
希望越做越好。

PS: chameleon 低码引擎 https://github.com/hlerenow/chameleon

有交流群吗

有交流群吗

看起来只能是新项目使用，老项目无法进行迁移

看起来只能是新项目使用，老项目无法进行迁移，nextjs项目能使用吗

yarn start失败：digital envelope routines::unsupported

os: fedora 38
kernel: 6.5.5-200.fc38.x86_64
node: v18.18.0
code commit: 1a17ee1

$ yarn start
yarn run v1.22.19
$ yarn workspace playground start
$ umi dev
Starting the development server...

● Webpack █████████████████████████ building (10%) 1/2 modules 1 active
 babel-loader › src/.umi/umi.ts

(node:48865) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node-18 --trace-deprecation ...` to show where the warning was created)
node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports.__webpack_modules__.57442.module.exports (/home/wencan/Projects/github.com/NetEase/tango/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:135907:62)
    at NormalModule._initBuildHash (/home/wencan/Projects/github.com/NetEase/tango/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109317:16)
    at /home/wencan/Projects/github.com/NetEase/tango/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109352:10
    at /home/wencan/Projects/github.com/NetEase/tango/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109223:13
    at /home/wencan/Projects/github.com/NetEase/tango/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:61151:11
    at /home/wencan/Projects/github.com/NetEase/tango/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:61017:18
    at context.callback (/home/wencan/Projects/github.com/NetEase/tango/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:60895:13)
    at /home/wencan/Projects/github.com/NetEase/tango/node_modules/@umijs/deps/compiled/babel-loader/index.js:1:130029 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.18.0
Done in 2.85s.

renderXXX 写法不支持

import React from "react";
import { definePage } from "@music163/tango-boot";
import { Page, Section, Button, Input, FormilyForm } from "@music163/antd";
class App extends React.Component {
  renderX(){
    return <Button>666</Button>
  }
  render() {
    return (
      <Page title={tango.stores.app.title}>
        <Section title="Section Title">
        {this.renderX()}</Section>
        <Section>
          <Button>button</Button>
          <Input />
        </Section>
      </Page>
    );
  }
}
export default definePage(App);

把这个丢到tango里, renderX里的组件可以拖拽,到另一个地方, 但表现上是复制,而不是移动

运行sandbox是否可以用nginx替换Caddy

目前看到以下命令会构建出www的静态资源

yarn install
yarn build:deps
yarn build:sandpack

Caddy依赖的配置是以下几项

1. https的设置
2. local.netease.com的域名设置
3. Origin-Agent-Cluster ?0 的 header设置

请问如果替换成nginx的话，是否只要满足以上3点就可以了？
是否还依赖Caddy的其他特性？

沙箱运行起来了 但是报错

首先感谢网易音乐云团队的付出。

1、看着像是环境变量的问题，请大佬指正
2、正式版咱们准备什么时候发行呢
3、项目中使用的是vue3 + element-plus 的二次封装， 怎么把项目修改成 vue3 的项目， 大佬能否说一下方案，或者应该注意的地方，愿意为社区贡献一份薄利

本地沙箱docker启动，修改了domain，无法链接

host做了修改

1、替换了:8080为local.netease.com

2、7f9beb0b21f9 docker.io/library/tango-codesandbox:latest "caddy run --config …" 3 minutes ago Up 0.0.0.0:8443->8443/tcp tango-codesandbox-7f9be

3、镜像启动日志
{"level":"info","ts":1695257316.437854,"msg":"using provided configuration","config_file":"/etc/caddy/Caddyfile","config_adapter":"caddyfile"}
{"level":"warn","ts":1695257316.4388368,"msg":"Caddyfile input is not formatted; run 'caddy fmt --overwrite' to fix inconsistencies","adapter":"caddyfile","file":"/etc/caddy/Caddyfile","line":3}
{"level":"info","ts":1695257316.4394667,"logger":"admin","msg":"admin endpoint started","address":"localhost:2019","enforce_origin":false,"origins":["//localhost:2019","//[::1]:2019","//127.0.0.1:2019"]}
{"level":"info","ts":1695257316.4397707,"logger":"tls.cache.maintenance","msg":"started background certificate maintenance","cache":"0x400009f180"}
{"level":"info","ts":1695257316.4407623,"logger":"http.auto_https","msg":"server is listening only on the HTTPS port but has no TLS connection policies; adding one to enable TLS","server_name":"srv0","https_port":8443}
{"level":"warn","ts":1695257316.4407756,"logger":"http.auto_https","msg":"automatic HTTP->HTTPS redirects are disabled","server_name":"srv0"}
{"level":"info","ts":1695257316.4409783,"logger":"tls","msg":"cleaning storage unit","description":"FileStorage:/data/caddy"}
{"level":"info","ts":1695257316.4410226,"logger":"tls","msg":"finished cleaning storage units"}
{"level":"info","ts":1695257316.440989,"logger":"http","msg":"enabling HTTP/3 listener","addr":":8443"}
{"level":"info","ts":1695257316.44109,"msg":"failed to sufficiently increase receive buffer size (was: 208 kiB, wanted: 2048 kiB, got: 416 kiB). See https://github.com/quic-go/quic-go/wiki/UDP-Buffer-Sizes for details."}
{"level":"info","ts":1695257316.4412634,"logger":"http.log","msg":"server running","name":"srv0","protocols":["h1","h2","h3"]}
{"level":"info","ts":1695257316.4412718,"logger":"http","msg":"enabling automatic TLS certificate management","domains":["local.netease.com"]}
{"level":"info","ts":1695257316.441771,"logger":"tls.obtain","msg":"acquiring lock","identifier":"local.netease.com"}
{"level":"info","ts":1695257316.4428742,"logger":"tls.obtain","msg":"lock acquired","identifier":"local.netease.com"}
{"level":"info","ts":1695257316.4429135,"logger":"tls.obtain","msg":"obtaining certificate","identifier":"local.netease.com"}
{"level":"info","ts":1695257316.4434357,"logger":"tls.obtain","msg":"certificate obtained successfully","identifier":"local.netease.com"}
{"level":"info","ts":1695257316.443454,"logger":"tls.obtain","msg":"releasing lock","identifier":"local.netease.com"}
{"level":"warn","ts":1695257316.4435532,"logger":"tls","msg":"stapling OCSP","error":"no OCSP stapling for [local.netease.com]: no OCSP server specified in certificate","identifiers":["local.netease.com"]}
{"level":"warn","ts":1695257316.4476962,"logger":"pki.ca.local","msg":"installing root certificate (you might be prompted for password)","path":"storage:pki/authorities/local/root.crt"}
{"level":"info","ts":1695257316.447804,"msg":"warning: "certutil" is not available, install "certutil" with "apt install libnss3-tools" or "yum install nss-tools" and try again"}
{"level":"info","ts":1695257316.4478083,"msg":"define JAVA_HOME environment variable to use the Java trust"}
{"level":"info","ts":1695257316.4613037,"msg":"certificate installed properly in linux trusts"}
{"level":"info","ts":1695257316.4615793,"msg":"autosaved config (load with --resume flag)","file":"/config/caddy/autosave.json"}
{"level":"info","ts":1695257316.4615903,"msg":"serving initial configuration"}

是否有方法将CDN资源替换为离线资源

由于网络原因，经常无法访问cdn资源，导致项目运行不起来
请问有没有手段使用本地的资源？

目前只看到 apps/playground/.umirc.ts 里面有一点点可以更改的地方

支持函数式组件吗?

虽然能正常运行,但是根据源码和公开的ppt, 用的都是类组件

a cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.

拖拽 forlimy 表单到区域, 释放时触发

package 依赖差些东西，全新环境要一个个补充，可以完善下

devDependencies 不完整

页面结构下的节点id每次editor save都会自增

定位到了代码位置，但是找不到原因。

这个函数在editor save时会执行两次，第二次为什么会执行没debug出来；

本地部署后“组件”加载不出来，一直转圈

操作系统：mac
tango、codesandbox-client都正常安装部署了，进入网页程序之后，组件一直加载不出来

请问项目中是如何实现在浏览器环境可以使用@babel/parser、@babel/traverse、@babel/generator的

如题，看了很久还是不明白，如能解惑，万分感谢

AI Copilot 功能什么时候上线?

我是看这篇文章关注到的 《云音乐低代码 + ChatGPT 实践方案与思考》https://mp.weixin.qq.com/s/jaIiVI636uJBOOKsXuHCpw
感觉本项目非常有意思,于是下载代码运行后发现本地运行的版本并没有此功能,组件似乎也没有readme中的功能多
请问准备什么时候上线 AI Copilot功能和开放更多组件呢

请问该引擎适合制作微信小程序吗，目前文档少，没啥思路

如生成taro小程序代码

是否支持多语言 i18n ?

看了下现在各大低代码平台，好像对于这一块的支持度比较差

想问下这个最终生产出来的页面是怎么部署到生产的，完整版会包括相关的功能吗，以及域名自定义相关的问题会是怎么样的处理方式

类型codeware的有开源的demo吗

关于[vscode 插件]形态的疑问

因为在另外的问题下面提到了以后也会提供[vscode 插件]

想咨询一个这个插件的形态

1. 是用vscode的编码能力替代设计器当中的源码视图吗？
2. 因为vscode本身就能安装依赖启动服务，是否也能替代sandbox的角色？

演示站点提示跨域错误

按顺序，依次添加 布局区块>Formily表单>Formily表单项
然后会报错如图

低代码平台提效的点在哪里

首先感谢网易云团队将低代码平台核心代码开源，其次我想问下，低代码平台一般都是给开发同学使用的，这种方式和传统的直接写代码的方式提效的点在哪，方便透露下内部使用了之后降本增效的数据吗？感谢🙏

本地已有沙箱，如何接入？

我本地已经启动了一个sandpack沙箱，如何用它来替换sandbox？
我改写了bundlerURL，但问题是没法打通整个拖拽及事件系统

1.0RC什么时候发

1.0RC什么时候发

Does this support TypeScript?

Nice try...

看起来更像是 JSX 界面设计器。

这种设计的问题是完全没法摆脱代码编辑，比如

let button;
if (isLoggedIn) {
  button = <Button children="按钮1" />;
} else {
  button = <Button children="按钮2" />;
}
return (
  <Page title="页面标题">
    <Section></Section>
    <Section>{button}</Section>
  </Page>
);

可视化编辑器永远看不到另一个了，必须切换到代码编辑模式

AST: 是否支持随意改动，包括结构改动、使用自定义组件、使用社区开源(Antd、Element) 等

首先非常感谢 tango 团队的付出！我有几个问题还没想明白，所以开个 issues 问一下

问题1：看起来是有物料约束的，虽然说摆脱了 JSON Schema 的约束

---

问题2：生成代码看起来是有一定的结构约束的

---

问题3：是否支持 .vue template，是否可以在与已有的业务页面代码兼容？还是说必须符合 Tango 提供的页面结构。

大佬这个可以生成vue2或者vue3源码么？

有点牛逼了，交流群偷学一下

建议 https://tango-demo.musicfe.com/designer/ 输出sourcemap

本地启动比较麻烦，习惯用官方的服务，希望提供sourcemap，这样我方便调试源码

文档演示应用拖拽异常

无法拖拽，无反应

执行 yarn start，启动不了项目

MacOS 之下启动，遇到下面的提示

yarn run v1.22.19
$ yarn workspace playground start
$ HTTPS=1 umi dev
Starting the development server...

● Webpack █████████████████████████ building (10%) 1/2 modules 1 active
 babel-loader › src/.umi/umi.ts

(node:24976) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
node:events:492
      throw er; // Unhandled 'error' event
      ^

Error: getaddrinfo ENOTFOUND local.netease.com
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:26)
Emitted 'error' event on Server instance at:
    at Server.emit (/Users/www/node_modules/@umijs/deps/compiled/spdy/spdy.js:1:211183)
    at GetAddrInfoReqWrap.doListen (node:net:2066:12)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:17) {
  errno: -3008,
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'local.netease.com'
}

Node.js v20.5.0
✨  Done in 3.20s.

无法拖出一个区块到Page下

1.0正式版本有新的预期时间吗？

很期待这个能提效开发的作品，但是频繁跳票很难熬，有最新的一个比较确切的时间吗？

demo中放置提交组件会报错

demo中放置提交组件会报错

设计区域，组件拖拽调整位置不太好操作

比如，想将下方组件拖到上方组件的前面无法做到，只能拖动上方组件到下方组件的下面

图中显示，只能将input组件拖到button组件的后面，无法拖到button的前面

observer包裹的组件加displayName

便于调试

export const HistoryTool = observer(()=>{});
HistoryTool.displayName = 'HistoryTool'

cant download sentry cli, what should i do