hateko/schema-plugin-flow

A highly extensible JavaScript library, abbreviated as Sifo. 一个高扩展性、可二开的插件式前端开发框架

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 usage through 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.

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-react-quick-start
  • sifo-react-decorator
  • sifo-mplg-form-antd
  • sifo-react-mplg-optimize

• sifo-vue

  • sifo-vue-quick-start
  • sifo-vue-decorator
  • sifo-vue-use-optimize
  • sifo-mplg-form-antdv

SifoApp (sifo-react/sifo-vue) 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.