react-plugin-system

    0.1.6 • Public • Published

    react-plugin-system

    React plugin development system

    Describe

    Independent react plugin development, plugin can be quickly inserted and pulled out, plugin async loading mode.

    How to use

    // src/index.js
    import { register } from "react-plugin-system";
    let pages = require.context("@plugins", true, /\/.*config\.js$/);
    pages.keys().map(key => {
      let config = pages(key).default;
      // reigster plugins
      register(config);
      return config;
    });
    // src/pages/*/*.jsx
    import React from "react";
    import { callPlugin, Plugin } from "react-plugin-system";
    export defalut class ButtonBox extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
        }
        /**
         * add
         */
        addHandle = async () => {
            // callPlugin
            const path = (callPlugin('add'));
            const plugin = await import("@plugins/" + path);
            (plugin.default)({ a: 1 });
        }
        /**
         * infoClose
         */
        infoCloseHandel = (data) => {
            console.log(data)
        }
        render() {
            const path = (callPlugin('info'));
            return <div>
                <Button icon="plus" onClick={this.addHandle}>新增</Button>
                <Plugin importComponent={() => { return import("@plugins/" + path) }} onClose={this.infoCloseHandel} />
            </div>
        }
    }

    plugin demo

    Add plugin

    // src/plugins/add/config.js
    export default {
      id: "add",
      index: "add/index.js"
    };
    // scr/plugins/add/index.js
    import { message } from "antd";
    export default function(config = {}) {
      const { calllBack = () => {} } = config;
      message.success("Add success!");
      calllBack();
    }

    Info plugin

    // src/plugins/info/config.js
    export default {
      id: "info",
      index: "info/index.jsx"
    };
    // scr/plugins/info/index.jsx
    import React from "react";
    import { Button, notification } from "antd";
    export default class Info extends React.Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
      clickHandle = () => {
        const { onClose = () => {} } = this.props;
        notification["info"]({
          message: "Project info",
          description: "Here is the notice!",
          onClose: () => {
            onClose("User Close");
          }
        });
      };
      render() {
        return (
          <Button icon="info-circle" onClick={this.clickHandle}>
            Info
          </Button>
        );
      }
    }

    Notice

    The system needs to add "@plugins" alias.

    // webpack.config.js
    {
        alias: {
            "react-native": "react-native-web",
            "@plugins": path.resolve("./src/plugins"),
        }
    }

    License

    Licensed under the Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)

    Keywords

    Install

    npm i react-plugin-system

    DownloadsWeekly Downloads

    0

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    16.1 kB

    Total Files

    18

    Last publish

    Collaborators

    • z137168075