diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js index 844f7e9ecd..b8ea95438a 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -37,13 +37,13 @@ class PluginManagerComponent extends ViewPlugin { this.appManager = appManager this.engine = engine this.pluginManagerSettings = new PluginManagerSettings() + this.localPlugin = new LocalPlugin() this.htmlElement = document.createElement('div') this.htmlElement.setAttribute('id', 'pluginManager') this.views = { root: null, items: {} } - this.localPlugin = new LocalPlugin() this.filter = '' this.pluginNames = this.appManager.actives this.activePlugins = [] @@ -80,6 +80,22 @@ class PluginManagerComponent extends ViewPlugin { _paq.push(['trackEvent', 'manager', 'activate', name]) } + /** + * Takes the name of a local plugin and does both + * activation and registration + * @param {Profile} pluginName + * @returns {void} + */ + async activateAndRegisterLocalPlugin (plugin, localPlugin) { + if (plugin) { + debugger + this.engine.register(localPlugin) + await this.appManager.activatePlugin(plugin) + // localStorage.setItem('targetLocalPlugin', plugin.name) + // localStorage.setItem('plugins/local', JSON.stringify(properPlugin)) + } + } + /** * Calls and triggers the event deactivatePlugin * with with manager permission passing in the name diff --git a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx index 1bed59fc34..8cf12647eb 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx @@ -35,7 +35,7 @@ function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardCon if (savedLocalPlugins === null) { localStorage.setItem('plugins/local', '{}') } - if (savedInactiveProfiles && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) { + if (savedInactiveProfiles && savedInactiveProfiles.length > 0 && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) { if (Object.keys(savedLocalPlugins).length > 0 && !pluginComponent.inactivePlugins.includes(savedLocalPlugins.profile as Profile)) { const inactiveLocalPlugin = savedLocalPlugins.profile localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name) @@ -48,8 +48,9 @@ function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardCon const inactiveLocalPlugin = savedLocalPlugins.profile localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name) temp.push([...pluginComponent.inactivePlugins, inactiveLocalPlugin]) + setinactiveProfiles(temp) } - setinactiveProfiles(temp) + setinactiveProfiles(pluginComponent.inactivePlugins) } }, [pluginComponent, pluginComponent.inactivePlugins]) return ( diff --git a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx index 31825318bd..6a180848a7 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-debugger */ import React, { useState } from 'react' import { ModalDialog } from '@remix-ui/modal-dialog' import { Toaster } from '@remix-ui/toaster' @@ -13,31 +14,37 @@ interface LocalPluginFormProps { } const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: FormStateProps, setErrorMsg: React.Dispatch>) => { + debugger try { - const profile = JSON.parse(localStorage.getItem('plugins/local')) || plugin - if (!profile) return - if (profile.profile) { + const profile = JSON.parse(localStorage.getItem('plugins/local')) + if (profile.profile && Object.keys(profile).length > 0) { if (pluginManager.appManager.getIds().includes(profile.profile.name)) { throw new Error('This name has already been used') } - } else { - if (pluginManager.appManager.getIds().includes(profile.name)) { - throw new Error('This name has already been used') - } - if (!profile.location) throw new Error('Plugin should have a location') - if (!profile.name) throw new Error('Plugin should have a name') - if (!profile.url) throw new Error('Plugin should have an URL') - const localPlugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile) - localPlugin.profile.hash = `local-${profile.name}` - // <-------------------------------- Plumbing starts here ---------------------------------------> - pluginManager.engine.register(localPlugin) - localStorage.setItem('plugins/local', JSON.stringify(localPlugin)) - pluginManager.activateP(localPlugin.profile.name) } + if (!plugin.location) throw new Error('Plugin should have a location') + if (!plugin.name) throw new Error('Plugin should have a name') + if (!plugin.url) throw new Error('Plugin should have an URL') + const localPlugin = plugin.type === 'iframe' ? new IframePlugin(plugin) : new WebsocketPlugin(plugin) + localPlugin.profile.hash = `local-${plugin.name}` + // <-------------------------------- Plumbing starts here ---------------------------------------> + const targetPlugin = { + name: localPlugin.profile.name, + displayName: localPlugin.profile.displayName, + description: (localPlugin.profile.description !== undefined ? localPlugin.profile.description : ''), + documentation: localPlugin.profile.url, + events: (localPlugin.profile.events !== undefined ? localPlugin.profile.events : []), + hash: localPlugin.profile.hash, + kind: (localPlugin.profile.kind !== undefined ? localPlugin.profile.kind : ''), + methods: localPlugin.profile.methods, + type: plugin.type, + location: plugin.location + } + pluginManager.activateAndRegisterLocalPlugin(targetPlugin, localPlugin) } catch (error) { console.error(error) // setErrorMsg(error.message) - setErrorMsg('This name has already been used') + setErrorMsg(error.message) } } function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) { diff --git a/libs/remix-ui/plugin-manager/src/types.d.ts b/libs/remix-ui/plugin-manager/src/types.d.ts index 410eb2b819..9d2a72d04c 100644 --- a/libs/remix-ui/plugin-manager/src/types.d.ts +++ b/libs/remix-ui/plugin-manager/src/types.d.ts @@ -3,7 +3,7 @@ import { PluginManager } from '@remixproject/engine/lib/manager' import { EventEmitter } from 'events' import { Engine } from '@remixproject/engine/lib/engine' import { PluginBase, Profile } from '@remixproject/plugin-utils' -import { ViewPlugin } from '@remixproject/engine-web' +import { IframePlugin, ViewPlugin, WebsocketPlugin } from '@remixproject/engine-web' /* eslint-disable camelcase */ declare module 'yo-yo'{ interface yo_yo { @@ -105,6 +105,7 @@ export class PluginManagerComponent extends ViewPlugin extends Plugin implements render(): HTMLDivElement getAndFilterPlugins: (filter?: string) => void triggerEngineEventListener: () => void + activateAndRegisterLocalPlugin: (plugin: Profile, localPlugin: IframePlugin | WebsocketPlugin) => Promise activeProfiles: string[] _paq: any } @@ -193,7 +194,7 @@ export interface FormStateProps { name: string displayName: string url: string - type: string + type: 'iframe' | 'ws' hash: string methods: any location: string