mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

trying manual plumbing for localplugin creation

Browse Source
pull/1344/head
joseph izang 3 years ago
parent de1c30e61d
commit 59e4db6a43
6 changed files with 73 additions and 137 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx
  2. 15
      libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx
  3. 36
      libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx
  4. 60
      libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
  5. 17
      libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
  6. 80
      libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts

2
libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCardContainer.tsx
Unescape View File

@ -33,7 +33,7 @@ function ActivePluginCardContainer ({ pluginComponent }: ActivePluginCardContain
buttonText="Deactivate"
profile={profile}
deactivatePlugin={deactivatePlugin}
key={profile.name}
key={profile.version}
setInactivePlugins={setinactiveProfiles}
inactivePlugins={inactiveProfiles}
activePlugins={activeProfiles}

15
libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx
Unescape View File

@ -1,6 +1,6 @@
import { getSolidity } from '@remix-ui/plugin-manager'
import { Profile } from '@remixproject/plugin-utils'
import React, { Dispatch, useState } from 'react'
import { getSolidity } from '../../pluginManagerStateMachine'
import { PluginManagerComponent } from '../../types'
import '../remix-ui-plugin-manager.css'
interface PluginCardProps {
@ -71,6 +71,7 @@ function InactivePluginCard ({
if (workspacePlugins.includes('solidity') === true && workspacePlugins.includes('solidity-logic') === true) {
if (pluginComponent.activeProfiles.includes('solidity') && pluginComponent.activeProfiles.includes('solidity-logic')) {
const result = await getSolidity(pluginComponent)
// check to make sure that solidity isn't already in tempList so that it won't be persisted to lcoalstorage twice.
tempList.push(...result)
}
}
@ -81,18 +82,6 @@ function InactivePluginCard ({
const temp = inactivePlugins.filter(plugin => plugin.name !== profile.name).filter(plugin => plugin.name !== 'solidity' && plugin.name !== 'solidity-logic')
setInactivePlugins(temp)
localStorage.setItem('updatedInactives', JSON.stringify(temp))
// const newActives = JSON.parse(localStorage.getItem('newActivePlugins'))
// // const updatedInactives = JSON.parse(localStorage.getItem('updatedInactives'))
// if (newActives === null || newActives.length === 0) {
// localStorage.setItem('newActivePlugins', JSON.stringify(getSolidity(pluginComponent)))
// const filteredInactives = pluginComponent.inactivePlugins.filter(inactive => inactive.name !== 'solidity' &&
// inactive.name !== 'solidity-logic')
// localStorage.setItem('updatedInactives', JSON.stringify(filteredInactives))
// }
// }
// }
// check to make sure that this activated profile is removed from inactives
// this should happen higher up in use effect at the root checking for the length of trackActiveProfiles
}}
className="btn btn-success btn-sm"
data-id={`pluginManagerComponentActivateButton${profile.name}`}

36
libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCardContainer.tsx
Unescape View File

@ -1,12 +1,23 @@
import { Profile } from '@remixproject/plugin-utils'
import React, { Fragment, useEffect, useState } from 'react'
import { PluginManagerComponent } from '../../types'
import { PluginManagerComponent, PluginManagerProfile } from '../../types'
import InactivePluginCard from './InactivePluginCard'
import ModuleHeading from './moduleHeading'
interface InactivePluginCardContainerProps {
pluginComponent: PluginManagerComponent
}
interface LocalPluginInterface {
profile: Partial<PluginManagerProfile> // { name: string, displayName: string, url: string, type: 'iframe' | 'ws', hash: string, methods: string, location: 'sidePanel' | 'mainPanel' | 'none'}
activateService: {}
requestQueue: []
options: { queueTimeout: number }
id: number
pendingRequest: {}
listener: []
iframe: {}
}
function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardContainerProps) {
const [activeProfiles, setActiveProfiles] = useState<Profile[]>()
const [inactiveProfiles, setinactiveProfiles] = useState<Profile[]>([])
@ -16,14 +27,29 @@ function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardCon
}
useEffect(() => {
const savedInactiveProfiles = JSON.parse(localStorage.getItem('updatedInactives'))
const savedInactiveProfiles: Profile[] = JSON.parse(localStorage.getItem('updatedInactives'))
const savedLocalPlugins: LocalPluginInterface = JSON.parse(localStorage.getItem('plugins/local'))
if (savedInactiveProfiles === null) {
localStorage.setItem('updatedInactives', '[]')
}
if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length > 0) {
setinactiveProfiles(pluginComponent.inactivePlugins)
} else if (savedInactiveProfiles && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) {
if (savedLocalPlugins === null) {
localStorage.setItem('plugins/local', '{}')
}
if (savedInactiveProfiles && 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)
savedInactiveProfiles.push(inactiveLocalPlugin as Profile)
}
setinactiveProfiles(savedInactiveProfiles)
} else if (pluginComponent.inactivePlugins && pluginComponent.inactivePlugins.length > 0) {
const temp = []
if (Object.keys(savedLocalPlugins).length > 0) {
const inactiveLocalPlugin = savedLocalPlugins.profile
localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name)
temp.push([...pluginComponent.inactivePlugins, inactiveLocalPlugin])
}
setinactiveProfiles(temp)
}
}, [pluginComponent, pluginComponent.inactivePlugins])
return (

60
libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx
Unescape View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { ModalDialog } from '@remix-ui/modal-dialog'
import { Toaster } from '@remix-ui/toaster'
import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
import React, { useState } from 'react'
import { FormStateProps, PluginManagerComponent } from '../../types'
interface LocalPluginFormProps {
@ -12,37 +12,37 @@ interface LocalPluginFormProps {
pluginManager: PluginManagerComponent
}
function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) {
const [errorMsg, setErrorMsg] = useState('')
const handleModalOkClick = async () => {
try {
const profile = JSON.parse(localStorage.getItem('plugins/local')) || plugin
if (!profile) return
if (profile.profile) {
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}`
pluginManager.engine.register(localPlugin)
// eslint-disable-next-line no-debugger
debugger
await pluginManager.appManager.activatePlugin(localPlugin.profile.name)
localStorage.setItem('plugins/local', JSON.stringify(localPlugin))
const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: FormStateProps, setErrorMsg: React.Dispatch<React.SetStateAction<string>>) => {
try {
const profile = JSON.parse(localStorage.getItem('plugins/local')) || plugin
if (!profile) return
if (profile.profile) {
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')
}
} catch (error) {
console.error(error)
// setErrorMsg(error.message)
setErrorMsg('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)
}
} catch (error) {
console.error(error)
// setErrorMsg(error.message)
setErrorMsg('This name has already been used')
}
}
function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) {
const [errorMsg, setErrorMsg] = useState('')
return (
<><ModalDialog
handleHide={closeModal}
@ -50,7 +50,7 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa
hide={visible}
title="Local Plugin"
okLabel="OK"
okFn={handleModalOkClick}
okFn={() => handleModalOkClick(pluginManager, plugin, setErrorMsg) }
cancelLabel="Cancel"
cancelFn={closeModal}
>

17
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
Unescape View File

@ -1,25 +1,10 @@
import React from 'react'
import { PluginManagerComponent, RemixUiPluginManagerProps } from '../types'
import { RemixUiPluginManagerProps } from '../types'
import ActivePluginCardContainer from './components/ActivePluginCardContainer'
import InactivePluginCardContainer from './components/InactivePluginCardContainer'
import RootView from './components/rootView'
import './remix-ui-plugin-manager.css'
export function getSolidity (pluginComponent: PluginManagerComponent) {
const fetchSolidity = async () => {
const solidity = await pluginComponent.appManager.getProfile('solidity')
const solidityLogic = await pluginComponent.appManager.getProfile('solidity-logic')
return [solidity, solidityLogic]
}
const materializeFetch = fetchSolidity()
return materializeFetch
}
export function getWorkspacePluginNames () {
const workspace: string[] = JSON.parse(localStorage.getItem('workspace'))
return workspace
}
export const RemixUiPluginManager = ({ pluginComponent }: RemixUiPluginManagerProps) => {
return (
<RootView pluginComponent={pluginComponent}>

80
libs/remix-ui/plugin-manager/src/pluginManagerStateMachine.ts
Unescape View File

@ -1,4 +1,3 @@
import { Profile } from '@remixproject/plugin-utils'
import { PluginManagerComponent } from './types'
export const defaultActivatedPlugins = [
@ -27,75 +26,12 @@ export const defaultActivatedPlugins = [
'udapp'
]
// /**
// * Compares default enabled plugins of remix ide
// * and tracks newly activated plugins and manages
// * their state by persisting in local storage
// * @param newPlugin Profile of a Plugin
// * @param pluginComponent PluginManagerComponent Instance
// */
// export async function PersistActivatedPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile) {
// const persisted = localStorage.getItem('newActivePlugins')
// const activatedPlugins: Profile[] = JSON.parse(persisted)
// const newlyActivatedPlugins: Array<Profile> = []
// const defaultActivated = defaultActivatedPlugins.includes(newPlugin.name) === false
// if (newPlugin) {
// if (defaultActivated) {
// // if this is true then we are sure that the profile name is in localStorage/workspace
// if (activatedPlugins && activatedPlugins.length && !activatedPlugins.includes(newPlugin)) {
// await FetchAndPersistPlugin(pluginComponent, newPlugin, activatedPlugins)
// localStorage.setItem('newActivePlugins', JSON.stringify(activatedPlugins))
// } else {
// await FetchAndPersistPlugin(pluginComponent, newPlugin, newlyActivatedPlugins)
// localStorage.setItem('newActivePlugins', JSON.stringify(newlyActivatedPlugins))
// }
// }
// }
// }
export function populateActivePlugins (pluginComponent: PluginManagerComponent) {
const activePluginNames = pluginComponent.activeProfiles
const filteredNames = []
const workspace: string[] = JSON.parse(localStorage.getItem('workspace'))
defaultActivatedPlugins.forEach(defaultName => {
if (workspace.includes(defaultName) === false) {
filteredNames.push(defaultName)
}
})
// filteredNames = activePluginNames.concat(defaultActivatedPlugins)
// const newArray = [...new Set(filteredNames)]
console.log('Here are the plugin names that should be shown!!', filteredNames)
// console.log('Here are the distinct profile names!!', newArray)
export function getSolidity (pluginComponent: PluginManagerComponent) {
const fetchSolidity = async () => {
const solidity = await pluginComponent.appManager.getProfile('solidity')
const solidityLogic = await pluginComponent.appManager.getProfile('solidity-logic')
return [solidity, solidityLogic]
}
const materializeFetch = fetchSolidity()
return materializeFetch
}
// async function FetchAndPersistPlugin (pluginComponent: PluginManagerComponent, newPlugin: Profile<any>, newlyActivatedPlugins: Profile<any>[]) {
// try {
// const targetProfile = await pluginComponent.appManager.getProfile(newPlugin.name)
// if (targetProfile !== null || targetProfile !== undefined) newlyActivatedPlugins.push(targetProfile)
// } catch {
// throw new Error('Could not fetch and persist target profile!')
// }
// }
// /**
// * Remove a deactivated plugin from persistence (localStorage)
// * @param pluginName Name of plugin profile to be removed
// */
// export function RemoveActivatedPlugin (pluginName: string) {
// const getWorkspacePlugins = JSON.parse(localStorage.getItem('newActivePlugins'))
// const removeExisting = getWorkspacePlugins.filter(target => target.name !== pluginName)
// localStorage.setItem('newActivePlugins', JSON.stringify(removeExisting))
// }
// /**
// * Gets the latest list of inactive plugin profiles and persist them
// * in local storage
// * @param inactivesList Array of inactive plugin profiles
// * @returns {void}
// */
// export function PersistNewInactivesState (inactivesList: Profile[]) {
// if (inactivesList && inactivesList.length) {
// localStorage.setItem('updatedInactives', JSON.stringify(inactivesList))
// }
// }

Write Preview
Loading…
Cancel
Save