opp-vue

Components and Hooks for Vue.

Installation

Using npm:

$ npm install --save opp-vue

Documentation

usePlugin

Return registered plugin with react hooks.

type usePlugin = (name: string) => Plugin['hooks'];

import { registerPlugin, start } from 'opp-core';
import { usePlugin } from 'opp-vue';

const plugin = { name: 'test', hooks: {} };

registerPlugin(plugin);
start();

const Component = (props = {}) => {
  usePlugin('test') === plugin.hooks;

  return <div>Component</div>;
};

PluginRender

PluginRender will render matched plugin with react lifecycle.

type Props = { id: string };
type PluginRender = ComponentType<Props>;

mount

PluginRender will do those things:

• Create HTMLDivElement with id same as props.id;
• Use props.id to find plugin with same plugin.container;
• Run plugin.mount with parameters: element (HTMLDivElement), props (props omit id);

update

PluginRender will do those things:

• Use props.id to find plugin with same plugin.container;
• Run plugin.update with parameters: props (props omit id);

unmount

PluginRender will do those things:

• Use props.id to find plugin with same plugin.container;
• Run plugin.unmount with no parameters;

CreatePlugin

Create plugin with React Component.

type CreatePlugin = (Component: ComponentType) => (plugin: Plugin) => Plugin;

import { useState } from 'react';
import { PluginRender, createPlugin } from 'opp-vue';

import { ElInput } from 'element-plus';

const plugin = createPlugin(ElInput)({
  name: 'input',
  container: 'input-element',
});

registerPlugin(plugin);
start();

const Component = (props = {}) => {
  const [value, setValue] = useState('');

  return (
    <PluginRender id="input-element" value={value} onChange={setValue} />
  );
};