sifo-vue

sifo-vue 是组装了sifo-model、sifo-singleton 的一个 Vue 组件。

sifo-vue 以 sifo-model 为内核，使用插件式的开发模式，为页面提供了多级定制与扩展能力。包含但不限于：页面结构的修改、渲染组件的替换、组件属性的变更、组件事件的监听与阻断等。结合不同的模型插件，可以实现更加丰富的特定功能。

codesandbox.io

sifo-vue

SifoApp (sifo-vue) Props

参数	说明	类型	是否必传	默认值
namespace	命名空间，这是一个功能集合的主要标识，第三方将根据命名空间来进行功能扩展	string	是	-
schema	schema，描述了页面结构	object	是	-
components	组件，引入局部组件时传入，全局组件不需传	object	否	{}
plugins	插件，分为模型插件、页面插件和组件插件	array：[{ componentPlugin, pagePlugin, modelPlugin }, { modelPlugin: otherModelPlugin }]	否	[]
externals	任意其它信息	object	否	{}
sifoExtProps	任意对象，mApi.getSifoExtProps 可以取到即时的值，这点与 externals 相区别	object	否	{}
modelApiRef	模型接口外传方法，调用参数为 mApi（接口构建完成时）或 null（模型销毁时）	function	否
openLogger	是否在控制台打印出执行日志，不建议在生产环境使用	bool	否	false
optimize	是否进行渲染优化，sifo-vue 是 top-down 的渲染模式，在复杂页面可以启用此参数	bool	否	false
getModelPluginArgs	获取模型插件实例化时的构造函数参数	function:(modelPluginId, info) => ([arg1, arg2, ...])	否
class	样式类	vue.class规范	否

扩展的 mApi 模型接口

mApi说明

方法名	参数/类型	返回值类型	描述
getSifoVueInstance	✘	VueComponent	获取 sifo-vue 的组件实例
getSifoExtProps	✘	任意对象	获取 SifoApp.sifoExtProps 即时的值
createElement	(component, attribute, children)	VueComponent	vue 的 createElement 方法
renderSlot	(nodeId, props)	VueComponent	渲染作用域插槽的方法，将带slot标的指定schema节点（参数nodeId即节点id）渲染成 scopedSlots 中的节点对象，使用方法见后文

attributes

属性名	类型	默认值	描述
muteRenderOptimizeMark	bool	false	当节点上此属性为true时，该节点不受渲染优化标记的控制，按照普通渲染模式渲染，但仍然受父组件的渲染与否影响

如何使用

项目

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

const App = {
  template: `
    <sifo-app
      :namespace="namespace"
      class="quick-start-demo"
      :plugins="plugins"
      :components="components"
      :schema="schema"
      :openLogger="openLogger"
    />
  `
};
new Vue({
  render: (h) => h(App,
  {
    props: {
      namespace: 'quick-start'
    }
  }
  )
}).$mount("#app");

runtime
- load extend js
- load app js
  
  你应该在 sifoApp 渲染前加载扩展 js 资源
```
<script src="extend.js"></script>
<script src="app.js"></script>
```

QuickStart

下面的例子演示了如何监听一个按钮组件的点击事件，并在点击事件中修改其它组件的属性，同时也演示了多个插件的情形。想了解更多的功能请参考sifo-model

<template>
  <sifo-app
    :namespace="namespace"
    class="quick-start-demo"
    :plugins="plugins"
    :components="components"
    :schema="schema"
    :openLogger="openLogger"
  />
</template>
// 注意改为script
<script--xxx-->
import SifoApp from "@schema-plugin-flow/sifo-vue";
// register local components
const components = {
  Container: {
    template: "<div><slot></slot></div>",
  },
  Slogan: {
    template: "<h2>{{content}}</h2>",
    props: ["content"],
  },
  Button: {
    template: `<button @click="$emit('click')">click to change</button>`,
  },
};
// schema 定义了初始的页面结构
const schema = {
  component: "Container",
  id: "mainId",
  attributes: {},
  children: [
    {
      component: "Slogan",
      id: "slogan_id",
      attributes: {
        content: "hello world",
      },
    },
    {
      component: "Button",
      id: "test_btn_id",
      attributes: {},
    },
  ],
};
// 组件插件可以实现与组件相关的功能
const componentPlugin1 = {
  test_btn_id: {
    onComponentInitial: (params) => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, "click", () => {
        mApi.setAttributes("slogan_id", {
          content: "hello sifo",
        });
      });
    },
  },
};
// 第二个插件
const componentPlugin2 = {
  test_btn_id: {
    onComponentInitial: (params) => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, "click", () => {
        console.log("test_btn_id clicked!");
      });
    },
  },
};
const plugins = [
  { componentPlugin: componentPlugin1 },
  { componentPlugin: componentPlugin2 },
];
export default {
  name: "quick-start",
  components: { SifoApp },
  beforeCreate: function () {
    const sifoAppProps = {
      namespace: "quick-start",
      plugins: plugins,
      components,
      schema,
      openLogger: true,
    };
    Object.keys(sifoAppProps).forEach((key) => {
      this[key] = sifoAppProps[key];
    });
  },
};
</script--xxx-->

外部扩展

如果一个页面是用 sifo 开发的，开发者可以在不接触原始代码的情况下，对页面进行扩展。这里用到了 sifo-singleton 全局扩展容器，只要在目标页面渲染前载入了扩展插件、组件，扩展功能就会在目标页面上生效。

import SifoSingleton from '@schema-plugin-flow/sifo-singleton';
const singleton = new SifoSingleton('quick-start');// 对目标命名空间进行扩展
// 插件的功能与使用跟前面的示例完全一致
const plugins = [{ pagePlugin, componentPlugin }];
const components = {};
singleton.registerItem('testExtendId', () => {
  return {
    plugins,
    components,
    openLogger: true, 
  }
});

renderSlot 使用示例

    const CompA = {
      template: `
        <div>
          <slot name="toslot" propa="val1" propb="val2">
        </div>
      `
    };
    const CompSlotItem = {
      template: `
        <div>
          {{ propa }}
          {{ propb }}
        </div>
      `,
      props: ['propa','propb']
    };

const schema = {
  component: 'CompA',
  id: 'compa-id',
  children:[
    {
      component: 'CompSlotItem',
      id: 't-slot-id',
      attributes: {
        slot: 'toslot'
      }
    }
  ]
};
mApi.setAttributes('compa-id', {
  scopedSlots: {
    // 有具名插槽时，无名（default）插槽要显式写，否则无法刷新
    toslot: function ({ propa, propb }) {
      return mApi.renderSlot('t-slot-id', { propa, propb });
    }
  }
})

sifoAppDecorator

为一个组件追加扩展能力时，可用修饰器方式。sifoAppDecorator 第一个参数是命名空间，第二个参数与上文的“SifoApp参数”一致（namespace 和 schema 除外）。此外还增加了如下参数：

参数	说明	类型	是否必传	默认值
fragments	片段列表。片段可以只定义一个id，通过 getFragment 方法获取片段来渲染；也可以传一个 schema，以 schema 的第一层 id 来标识	array	否	-

被 sifoAppDecorator 修饰的组件，props 中将出现 sifoApp 对象，对象包含 addEventListener、 watch、getFragment 等方法和 mApi 接口。

sifoAppDecorator 示例

下面的示例包含：

修饰 TestDecorator 组件，并返回修饰后的 App 组件；
App 组件标注命名空间为 test-sifo-decorator；
TestDecorator 组件向外暴露 click 事件，扩展件就可以监听与干预这些事件；
TestDecorator 注册了 updateData、getData 观测，扩展件可以发布相应观测消息来与 App 通信；
TestDecorator 定义了 $dynamic_panel, $static_panel 片段，以使扩展件可以在页面指定位置渲染内容。完整示例请参照这里

对TestDecorator组件加修饰

import { sifoAppDecorator } from "@schema-plugin-flow/sifo-vue";
import TestDecorator from './test-decorator-target.vue';
//
const componentPlugin = {
  'test-sifo-decorator': {
    onComponentInitial: params => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, 'click', (ctx, ...arg) => {
        console.log('decorator: clicked', ctx, arg);
      });
    }
  }
};
const plugins = [{ componentPlugin }];
const App = sifoAppDecorator('test-sifo-decorator', {
  externals: { aa: 1 },
  plugins,
  fragments: ['$dynamic_panel', '$static_panel'],
  class: "decorator-test",
  openLogger: false
})(TestDecorator);
export default App;

TestDecorator 组件

<template>
  <div>
    <div>
      <span>count：{{ count }}</span>
      <button v-bind:style="{ margin: '4px 8px' }" v-on:click="count++">
        add count
      </button>
    </div>
    <div>
      <button v-bind:style="{ margin: '4px 0' }" @click="click">
        fire click method
      </button>
    </div>
    <div>
      不传参片段：
      <component v-bind:is="staticFragment"></component>
    </div>
    <div>
      动态传参数片段：
      <component v-bind:is="getDynamicFragment()"></component>
    </div>
  </div>
</template>
//
<script--xxx-->
// this is the Vue Component who will be decorated.
const TestDecorator = {
  name: "decorator-test",
  components: {},
  data: function () {
    return {
      count: 0,
      staticFragment: this.sifoApp.getFragment("$static_panel"),
    };
  },
  created: function () {
    this.sifoApp.watch("updateData", (ctx, key, val) => {
      if (key === "count") {
        this.count++;
      }
    });
    this.sifoApp.watch("getData", (e, getter) => {
      getter({
        count: this.count,
      });
    });
    // prepose传入true可使事件先于扩展件注册，在希望外部能够覆盖（扩展）内部方法时可使用
    this.clickFn = this.sifoApp.addEventListener("click", (...args) => {
      console.log("target: clicked");
    }, true);
  },
  methods: {
    click: function (...args) {
      // 建议不要直接在模板上绑定clickFn，否则可能带来非预期问题
      this.clickFn(...args);
    },
    getDynamicFragment: function () {
      return this.sifoApp.getFragment("$dynamic_panel", {
        value: `count: ${this.count}`,
      });
    },
  },
  destroyed() {
    console.log("destroyed");
  },
  // declare sifoApp property
  props: ["sifoApp"],
};
export default TestDecorator;
</script--xxx-->

sifoAppDecorator 下的外部扩展示例

import SifoSingleton from '@schema-plugin-flow/sifo-singleton';
import { Input, Button } from "ant-design-vue";
//
const customOnChange = (context, e) => {
  const { event, mApi } = context;
  const { key } = event;
  mApi.setAttributes(key, { value: e.target.value + 'extVal' });
}
const pagePlugin = {
  onNodePreprocess: (node, info) => {
    const { id, component } = node;
    if (id === '$sifo-header') {
      return {
        ...node,
        attributes: {
          style: {
            color: "green"
          }
        },
        children: ['这是扩展的header']
      }
    }
    if (id === '$dynamic_panel' || id === '$static_panel') {
      // 将片段直接换成新的组件，这个组件就可以拿到getFragment的参数
      return {
        ...node,
        component: 'Input',
        attributes: {
          ...node.attributes,
          others: {
            ok: false
          }
        }
      }
    }
    if (id === '$sifo-footer') {
      return {
        ...node,
        attributes: {
          style: {
            border: "1px solid green",
            padding: "4px"
          }
        },
        children: [
          {
            component: 'div',
            children: ['这是扩展的footer']
          },
          {
            component: 'Button',
            id: 'updateDataBtn',
            children: ['updateCount']
          }]
      }
    }
    return node;
  },
}
const componentPlugin = {
  'test-sifo-decorator': {
    onComponentInitial: params => {
      const { event, mApi } = params;
      let fcount = 0;
      mApi.addEventListener(event.key, 'click', (context, e) => {
        //context.event.stop();
        console.log('ext: click', context, e);
        mApi.setAttributes('$static_panel', {
          value: `ext click fired: ${++fcount}`
        });
      });
    }
  },
  $dynamic_panel: {
    onComponentInitial: params => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, 'change', customOnChange);
    }
  },
  $static_panel: {
    onComponentInitial: params => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, 'change', customOnChange);
    }
  },
  updateDataBtn: {
    onComponentInitial: params => {
      const { event, mApi } = params;
      mApi.addEventListener(event.key, 'click', () => {
        mApi.dispatchWatch('getData', data => {
          console.log('old data:', data);
        });
        mApi.dispatchWatch('updateData', 'count');
      });
    }
  }
};
const singleton = new SifoSingleton('test-sifo-decorator');
singleton.registerItem('ccc', () => {
  return {
    plugins: [
      {
        pagePlugin,
        componentPlugin
      }
    ],
    components: {
      Input, Button
    },
    openLogger: true
  };
});
//
export default singleton;

@schema-plugin-flow/sifo-vue

sifo-vue

codesandbox.io

SifoApp (sifo-vue) Props

扩展的 mApi 模型接口

attributes

如何使用

QuickStart

外部扩展

renderSlot 使用示例

sifoAppDecorator

sifoAppDecorator 示例

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@schema-plugin-flow/sifo-vue

sifo-vue

codesandbox.io

SifoApp (sifo-vue) Props

扩展的 mApi 模型接口

attributes

如何使用

QuickStart

外部扩展

renderSlot 使用示例

sifoAppDecorator

sifoAppDecorator 示例

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads