How to use repluggable for creating plugins

[AbolfazlHeidarpour]

Hi there
Suppose there is react app. And suppose there are some React feature components, let's say ContactsList, EditContacts, AddContacts. This components must be plugginable. Like how users control and add plugins in WordPress. How this functionality can be implemented with repluggable package?

[itsh01]

Hi

With a Repluggable package you can extend other Repluggable packages by contributing things (components/objects/functions/...) via their APIs
Internally the owner of those APIs will create extension slots that the React components would consider.
E.g. something like this:

// ContactsAPI.tsx

export interface ContactsAPI {/*...*/}
export const ContactsAPI: SlotKey<ContactsAPI>

interface ContactsExtensionItem {/*...*/}
const contactsExtensionsKey: SlotKey<ContactsExtensionItem> = {
  name: 'contacts-extensions'
}

const ContactListPure: ReactComponent<ContactListProps> = ({extensions}) => <div>{/*...*/}<div/>

const createContactsListComponent = (boundShell: Shell) => connectWithShell(
  shell => ({
    extensions: shell.getSlot(contactsExtensionsKey).getItems()
  }),
  () => ({}),
  boundShell
)(ContactListPure)

export const createContactsAPI = (shell: Shell): ContactsAPI => {
  const contactsExtensions = shell.declareSlot(contactsExtensionsKey)

  return {
    contributeContactExtension(contributingShell: Shell, extension: ContactsExtensionItem) {
      contactsExtensions.contribute(contributingShell, extension)
    },
    ContectsList: createContactsListComponent(shell)
  }
}

// ContactsPackage.tsx

export const contactsPackage: EntryPoint[] = [{
  //...
  attach(shell) { shell.contributeAPI(ContactsAPI, () => createContactsAPI(shell)) },
  extend(shell) {
    const { ContactsList } = shell.getAPI(ContactsAPI)
    shell.getAPI(MyWorkspace).contributeComponent(<ContactsList />)
  }
}]