alibaba / Schema Plugin Flow
Licence: mit
A highly extensible JavaScript library, abbreviated as Sifo. 一个高扩展性、可二开的插件式前端开发框架
Stars: ✭ 288
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Schema Plugin Flow
Vue Rawmodel
RawModel.js plugin for Vue.js v2. Form validation has never been easier!
Stars: ✭ 79 (-72.57%)
Mutual labels: schema, plugin, form
Native
Generate a form using JSON Schema and Vue.js
Stars: ✭ 382 (+32.64%)
Mutual labels: schema, form
Convform
A jQuery plugin that transforms a form into an interactive chat.
Stars: ✭ 141 (-51.04%)
Mutual labels: plugin, form
Formality
Forms made simple (and cute). Designless, multistep, conversational, secure, all-in-one WordPress forms plugin.
Stars: ✭ 30 (-89.58%)
Mutual labels: plugin, form
Fielder
A field-first form library for React and React Native
Stars: ✭ 160 (-44.44%)
Mutual labels: schema, form
Vue Form Builder
Build powerful vue form with JSON schema and composition api.
Stars: ✭ 325 (+12.85%)
Mutual labels: form, ant-design
scalable-form-platform
A solution for building dynamic web forms with visual editor
Stars: ✭ 109 (-62.15%)
Mutual labels: form, ant-design
vue-example
Vue.js example application (server-side rendering, router, vuex store, form validation, i18n & l10n)
Stars: ✭ 62 (-78.47%)
Mutual labels: schema, form
Antd Schema Form
Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design,可以通过JSON Schema配置生成可交互的表单。
Stars: ✭ 137 (-52.43%)
Mutual labels: form, ant-design
Formily
Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3
Stars: ✭ 6,554 (+2175.69%)
Mutual labels: form, ant-design
fform
Flexibile and extendable form builder with constructor
Stars: ✭ 26 (-90.97%)
Mutual labels: schema, form
Form Render
🚴♀️ 阿里飞猪 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Stars: ✭ 3,881 (+1247.57%)
Mutual labels: ant-design, form
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (-12.15%)
Mutual labels: schema, form
formily
Simple, lightweight, and flexible schema-based form for Vue.js
Stars: ✭ 23 (-92.01%)
Mutual labels: schema, form
Vue Form Generator
📋 A schema-based form generator component for Vue.js
Stars: ✭ 2,853 (+890.63%)
Mutual labels: schema, form
schema-plugin-flow
Introduction
schema-plugin-flow, abbreviated as Sifo ([sɪfɔ]),is a highly extensible JavaScript library. This library allows developers to extend business logic and page layout without touching source code, when the source code is written in Sifo.
- sifo-model is the core of Sifo, which using JSON (as Schema) to describe page's structures and using plugins as logic controller. There are three kinds of plugin: modelPlugin、pagePlugin and componentPluign. You can learn about Sifo's basic information and the usage patterns by reading this package's README.
-
sifo-react is a React Component encapsulates sifo-model and sifo-singleton. sifo-react also support
sifoAppDecorator
, with which a normal React Commponent will has extension ability. You can learn about that via package's README or online demos. -
sifo-vue is a Vue Component encapsulates sifo-model and sifo-singleton. sifo-vue also support
sifoAppDecorator
, with which a normal Vue Commponent will has extension ability. You can learn about that via package's README or online demos. - sifo-singleton is a global extensions holder. All kinds of extend-plugins and extend-components are registered to it.
modelPlugins
- sifo-mplg-react-optimize is a modelPlugin for sifo-react optimization.
- sifo-mplg-form-core is a sifo form-core model plugin. This model plugin, basing on simple schema setting, realized the form fields' control and supplied form operations with a serial of api.
- sifo-mplg-form-antdv is a sifo form with ant-design-vue, works with sifo-mplg-form-core and sifo-vue.
- sifo-mplg-form-antd is a sifo form with ant-design, works with sifo-mplg-form-core and sifo-react.
Sifo family
-
sifo-model
+react
=sifo-react
-
sifo-model
+vue
=sifo-vue
-
sifo-react
+sifo-mplg-form-core
+ant-design
=sifo-mplg-form-antd
-
sifo-vue
+sifo-mplg-form-core
+ant-design-vue
=sifo-mplg-form-antdv
Three elements of Sifo
Installation
$ npm i @schema-plugin-flow/sifo-model --save
$ npm i @schema-plugin-flow/sifo-react --save
$ npm i @schema-plugin-flow/sifo-vue --save
Try in local
-
React
- clone code and start
$ git clone https://github.com/alibaba/schema-plugin-flow.git $ cd schema-plugin-flow $ npm run i $ npm run start
- then visit
http://localhost:8000
.
-
Vue
- clone code and start
$ git clone https://github.com/alibaba/schema-plugin-flow.git $ cd schema-plugin-flow $ npm run i $ npm run i-vue $ npm run start-vue
- then visit
http://localhost:8080
.
Try online (codesandbox.io)
-
sifo-react
-
sifo-vue
How to use
-
project
-
extend.js
import SifoSingleton from '@schema-plugin-flow/sifo-singleton'; const singleton = new SifoSingleton('quick-start'); // target namespace singleton.registerItem('testExtendId', () => { return { plugins, components } });
-
app.js
import React from 'react'; import ReactDOM from "react-dom"; import SifoApp from '@schema-plugin-flow/sifo-react'; class App extends React.Component { render() { return ( <SifoApp namespace='quick-start' components={components} schema={schema} plugins={plugins} /> ); } } ReactDOM.render( <App /> rootElement );
-
-
runtime
-
load extend js
-
load app js
you should load the extend js before sifoApp rendered.
<script src="extend.js"></script> <script src="app.js"></script>
-
SifoApp (sifo-react/sifo-vue) Demo
-
form-extend-demo
-
simple demo
In this demo, there are seven extend-plugins in seven independent js. The checkbox set which plugin should be registered. Each plugin control different logic and all registered plugins make up a integrated page.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].