Coder Social home page Coder Social logo

alibaba / lowcode-engine Goto Github PK

View Code? Open in Web Editor NEW
13.9K 184.0 2.4K 6.21 MB

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系

Home Page: https://lowcode-engine.cn

License: MIT License

JavaScript 1.95% HTML 0.38% TypeScript 94.72% Shell 0.12% CSS 0.03% SCSS 0.05% Less 2.74%
low-code alibaba lowcode

lowcode-engine's Introduction

LowCodeEngine

An enterprise-class low-code technology stack with scale-out design

NPM version NPM downloads

Issues need help

codecov Awesome

English | 简体中文

✨ Features

  • 🌈 An extension-oriented kernel engine extracted from an enterprise-level low-code platform, pursuing the design concept of the smallest kernel and the strongest ecology
  • 📦 Out-of-the-box high-quality ecological elements, including material systems, setters, plugins, etc.
  • ⚙️ A complete tool chain, supporting the full-link R&D cycle of ecological elements such as material systems, setters, and plug-ins
  • 🔌 Powerful expansion capability, has supported nearly 100 various vertical low-code platforms
  • 🛡 Developed with TypeScript, providing complete type definition files

🎯 Compatible Environments

  • Modern browsers (Chrome >= 80, Edge >= 80, last 2 safari versions, last 2 firefox versions)

📚 Engine Protocol

The engine fully implements the "LowCodeEngine Basic Construction Protocol Specification" and "LowCodeEngine Material Protocol Specification". The protocol stack is a key part of whether materials in the low-code field can be circulated.

image

🌰 Usage example

npm install @alilc/lowcode-engine --save-dev

TIPS: Only cdn import is supported, npm package is used to provide code hinting capabilities such as typings

import { init, skeleton } from '@alilc/lowcode-engine';

skeleton.add({
  area: 'topArea',
  type: 'Widget',
  name: 'logo',
  content: YourFantasticLogo,
  contentProps: {
    logo:
      'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png',
    href: '/',
  },
  props: {
    align: 'left',
    width: 100,
  },
});

init(document.getElementById('lce'));

Engineering configuration:

{
  "externals": {
    "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
    "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt"
  }
}

cdn optional method:

Method 1: alifd cdn

https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/engine-core.js

https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/react-simulator-renderer.js

Method 2: uipaas cdn

https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js

https://uipaas-assets.com/prod/npm/@alilc/lowcode-react-simulator-renderer/1.0.18/dist/js/react-simulator-renderer.js

Method 3: unpkg

https://unpkg.com/@alilc/[email protected]/dist/js/engine-core.js

https://unpkg.com/@alilc/[email protected]/dist/js/react-simulator-renderer.js

Method 4: jsdelivr

https://cdn.jsdelivr.net/npm/@alilc/[email protected]/dist/js/engine-core.js

https://cdn.jsdelivr.net/npm/@alilc/[email protected]/dist/js/react-simulator-renderer.js

Method 5: Use your own cdn

Pass the files under packages/engine/dist and packages/react-simulator-renderer/dist in the source code to your cdn provider

🔗 Related Links

This awesome-lowcode-engine page links to a repository which records all of the tools\materials\solutions that use or built for the lowcode-engine, PR is welcomed.

💻 Local debugging

$ git clone [email protected]:alibaba/lowcode-engine.git
$ cd lowcode-engine
$ npm install
$ npm run setup
$ npm start

📢 npm access speed is slow, Alibaba employees can use tnpm, other students recommend using cnpm or specifying a mirror registry.

📢 Windows environment must use WSL, other terminals are not guaranteed to work normally

After lowcode-engine is started, several umd files are provided, which can be debugged in combination with the lowcode-demo project. Refer to the file proxy rules here.

🤝 Participation

Please read first:

  1. How to configure the engine debugging environment?
  2. About the R&D collaboration process of the engine
  3. Engineering Configuration of Engine

Strongly recommend reading "The Wisdom of Asking Questions", ["How to Ask Questions to the Open Source Community"](https: //github.com/seajs/seajs/issues/545) and How to Report Bugs Effectively, "How to Submit Unanswerable Questions to Open Source Projects", better questions are easier to get help. (This paragraph refers to antd)

About Pull Request:

  • set the target branch to develop other than main

❤️ Contributors

Special thanks to everyone who contributed to this project.

lowcode-engine's People

Contributors

1ncounter avatar actions-user avatar akirakai avatar alvarto avatar andyjinss avatar barmplus avatar beautiful-boyyy avatar chizng avatar chvin avatar clarence-pan avatar dbvc avatar dzlhk avatar eighthundreds avatar eternalsky avatar frank-zsy avatar haloworld007 avatar haoziqaq avatar jacklian avatar jinchanz avatar keuby avatar lecepin avatar leoyuan avatar liujuping avatar markyun avatar meizilove258 avatar owenchen1004 avatar rainke avatar wukidy avatar xingmolu avatar zyy7259 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lowcode-engine's Issues

碰到几个问题

  1. readme里写的git clone地址,建议换成https的,否则git的是没权限的。
  2. 把整个项目clone到本地,以开发方式安装运行,没有报错,但是成了这个样子。
    ` Starting the development server at:
    • Local : http://localhost:3333/
    • Network: http://xxx.xxx.xxx.xx:3333/,
      `
      然后浏览器输入对应的url打开宛如nginx打开目录,全是一个个文件夹或者文件。 根本没有启动项目的样子。原谅我没有截图,没有找到上传图片的地方。
  3. 运行了在线demo. 发现画布上的元素无法移动。 更别说复制出来的元素进行移动了。
  4. 感觉需要出个使用手册。 就是你们的产品让一个新手或者非技术人员使用,他需要注意什么,当然二开文档也是需要的。
  5. 在画布上编辑完以后点击保存到本地,是存到localStorage了吗?还是存成文件了呢。 感觉保存的操作感不强,不知道保存到哪里了。有点害怕自己劳动了半天的劳动成果就没有了。
  6. 感觉需要像processon那样引入项目的概念。我同时进行两个编辑怎么办呢。
  7. 预览很糟糕,或者可能我使用的方式不对,画布上显示的和预览的完全不一样。画布上看着像个半成品,预览出来效果就是乱码。。
  8. 是否有类似批量应用样式的效果呢。两行3列的效果。我使用了6个文本。然后一个一个修改样式。这样的低代码应用样式,感觉还不如手写
  9. select少了一种默认展开options的配置项,可能是setters里应该加个参数
  10. 事件还不太会用。我想实现点击一个按钮让弹窗出现,还不得要领。
  11. 导入导出问题,能否类似draw.io那样,不止导出js和css,还能导出一个类似原型的,然后方便后续分享给别人在同样的系统里实现导入,已达到团队协作的目的
  12. 一个遮罩我配置了隐藏,我如何在画布中重新找到它呢
  13. demo里导出zip解压缩后的package.json里有"@alifd/next": "{{version}}", alifd/[email protected] npm里没有这个版本

我最满意的一个点

  1. 可以自定义画布宽度。

最后问一句,25个issues怎么就能搞到1k star的,有点意外。。

安装依赖报错

pnpm install
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/@ali/ali-lowcode-materials: Not Found 
- 404
@ali/ali-lowcode-materials is not in the npm registry, or you have no permission to fetch it
.
An authorization header was used: Bearer npm_[hidden]

@ali/ali-lowcode-materials
貌似这个包没有开源

[lowcode-datasource] packages/* 对应dependencies在npm上不存在

问题一:
进入项目[lowcode-datasource]
执行 yarn install
报错 @ali/mirror-io-client-mopen + @ali/mirror-io-client-mtop + @ali/mirror-io-client-universal-mtop 在npm上不存在

问题二:
lowcode-datasource/packages/datasource-engine/src/typings.d.ts
声明的 @alilc/mirror-io-client-mopen 与实际引用 @ali/mirror-io-client-mopen 不符

功能文档能写的清晰一点吗?

image

这个文档写的太不清晰了吧。。

image

默认打开的画布位置为什么是跟着左边的侧边栏一样高的。。高度怎么调整也没有写。。这真的是准备开源给人用的吗?

几个问题

  1. 目前项目启动有问题,在windows上没法起来。只有装个ubuntu,还要整各种编译依赖,node-sass的兼容问题
  2. 文档目前不够健全,希望能整个umi类似的文档
  3. 项目启动速度太慢
  4. 运行时的一个js文件差不多2M多,体积太大了

如何将生成的schema跑起来

我在demo里生成了schema,然后将schema放到create-react-app生成的项目里,但是看到官方的demo的button例子可以跑起来,但是我的那一大堆schema json没有办法跑起来。报错如下:

1. NextPage component is not found in components list! component list is:
2. NextBlock component is not found in components list! component list is
3. react-dom.development.js:67 Warning: NotFoundComponent has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.
4. React does not recognize the `headerDivider` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `headerdivider` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
5. React does not recognize the `presetNav` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `presetnav` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
6. Received `false` for a non-boolean attribute `nav`. If you want to write it to the DOM, pass a string instead: nav="false" or nav={value.toString()}. If you used to conditionally omit it with nav={condition && value}, pass nav={condition ? value : undefined} instead.
    at div
7. `React does not recognize the `placeholderStyle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `placeholderstyle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.`

这是解析错了,还是少了解析包了呢。。或者能否告诉我http://lowcode-engine.cn/doc?url=nhilce这个例子里面的schema和components哪里可以完整下载下来, 我只看到了schema的地方。在左下角schema那里

物料(element-material)环境问题

---------- 物料(element-material)环境问题 ----------
出现的 version 0.1.0

  1. npm install 没有安装 fie
    package.json 的 devDependencies 下没有 fie 的列表信息 是需要手动全局安装么?

2 npm start启动项目
提示:
/bin/sh: tnpm: command not found
手动安装 tnpm后 再次运行
提示
[core-error] 运行插件或套件时出现了错误, 未找到 @ali/fie4-plugin-component 模块! 正在尝试自动修复...
npm库里我也没有搜到相关包的信息

渲染引擎有问题

设计器页面,给onSearch 绑定了一个点击事件,保存schema到localstorage后,预览就渲染不出来了

请问 editTable组件怎么绑定 state数据源?

Describe the bug (required) / 详细描述 bug(必填)

请问 editTable组件怎么绑定 state数据源?
右侧属性面板没有发现可以绑定数据源,文档也没有体现在哪里绑定数据源变量

demo出码后的工程 yarn @ali/universal-mtop 报错

demo出码后,下载源码进行yarn 发现 Couldn't find package "@ali/universal-mtop@^5.1.9" required by "@alilc/lowcode-datasource-mtop-handler@*" on the "npm" registry。无法安装成功,导致出码后的代码无法使用,烦请解决一下。

啥时候出个vue版本?

啥时候出个vue版本?国内vue用户群体还是挺多的,好几个出名的这种平台,都是react,没有vue版

启动后界面异常

按照Readme步骤

  1. npm install
  2. npm run setup
  3. npm run start

启动成功:
image

打开链接后显示如下:
image

启动报错

有一些 @ali/* 的依赖包没改,
启动后报错 1.TypeError: Cannot set property components of [object Module] which has only a getter
2.process is not defined

实体(Entity)设计器、数据建模

请教下:
1,框架会涉及实体设计器、数据建模型相关不?
2,框架只会涉及客户端相关?还是会涉及服务端的实体建模、数据建模、服务端业务服务或插件编码及编排?
3,假如目前规则不涉及实体设计器、数据建模型,有没建议的实现及集成思路

能否在项目里面新增storybook支持

这个项目很大。如果遇到问题丢到codesandbox,不太现实,能否提供对storybook支持。这样后续其他基友也能贡献测试用例。完善engine

启动报错

我通过http方式将代码拉下来后
首先 npm install成功了
然后在执行npm run setup报错了
这是以下报错
image
而后我通过排查到日志是这样的
image
我不太熟悉sh脚本
image
l 我仔细看了下自己还是无法解决,通过百度都尝试过了

自定义物料子组件配置问题

image

如图两个问题:

  1. 图中的Filter组件的子组件如何配置才能在Editor中选中?
  2. 子组件如何根据内部子组件展示不同的标题?

图中两个筛选组件分别是日期选择框和输入框,在lowcode-materials中没有开源Filter组件,也没有类似demo,麻烦大佬解答。

@alifd/build-plugin-lowcode包功能问题

lowcode-plugins下的base-monaco-editor项目有一个依赖@alifd/build-plugin-lowcode,请问这个包的功能是什么呢,也没有看到这个依赖的源码,如果没有用到是否可以删掉

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.