1 Star 0 Fork 1

开源技术 / schema-plugin-flow

forked from alibaba / schema-plugin-flow 
Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

schema-plugin-flow

English | 简体中文

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-mplg-drag Sifo drag model plugin. Basing on custom Components and Schema rendering, you can drag and drop component instantaneously and reconstruct a Schema. Please refer to sifo-mplg-drag-react and sifo-mplg-drag-vue.
  • sifo-mplg-drag-react Sifo drag model plugin for React components.
  • sifo-mplg-drag-vue Sifo drag model plugin for Vue components.

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

  • schema: to describe page's structures
  • components
  • plugins: logic controller

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)

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';
      const plugins = [{ modelPlugin, componentPlugin, pagePlugin }];
      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

    sifo-react-extends-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.

    demo

MIT License Copyright (c) 2020 Alibaba Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

No description expand collapse
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/gfzl-open-source/schema-plugin-flow.git
git@gitee.com:gfzl-open-source/schema-plugin-flow.git
gfzl-open-source
schema-plugin-flow
schema-plugin-flow
master

Search

14c37bed 8189591 565d56ea 8189591