How to use repluggable for creating plugins about repluggable

[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 />)
  }
}]