diff --git a/libs/remix-ui/app/src/index.ts b/libs/remix-ui/app/src/index.ts index fd6aed5d67..e47f8690e7 100644 --- a/libs/remix-ui/app/src/index.ts +++ b/libs/remix-ui/app/src/index.ts @@ -1,2 +1 @@ export { default as RemixApp } from './lib/remix-app/remix-app' -export { default as IframeReactPlugin } from './lib/remix-app/plugins/IFrameReactPlugin' diff --git a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx b/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx deleted file mode 100644 index f56ea4f863..0000000000 --- a/libs/remix-ui/app/src/lib/remix-app/components/panels/iFramePluginView.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useRef, useState } from 'react' -import IframeReactPlugin from '../../plugins/IFrameReactPlugin' - -interface IFramePluginViewProps { - plugin: IframeReactPlugin -} - -const IFramePluginView = (props: IFramePluginViewProps) => { - const ref = useRef() - const [loading, isLoading] = useState(true) - - const loaded = () => { - props.plugin.shake(ref.current) - isLoading(false) - } - - const loader =
-
- Loading... -
-
- - return (<> -
{loader}
- - ) -} - -export default IFramePluginView diff --git a/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx b/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx deleted file mode 100644 index 27a807a5b5..0000000000 --- a/libs/remix-ui/app/src/lib/remix-app/plugins/IFrameReactPlugin.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import type { Message, Profile, ExternalProfile, LocationProfile } from '@remixproject/plugin-utils' -import { PluginConnector } from '@remixproject/engine' -import React from 'react' // eslint-disable-line -import IFramePluginView from '../components/panels/iFramePluginView' - -export type IframeProfile = Profile & LocationProfile & ExternalProfile - -/** - * Connect an Iframe client to the engine. - * @dev This implements the ViewPlugin as it cannot extends two class. Maybe use a mixin at some point - */ -class IframeReactPlugin extends PluginConnector { - // Listener is needed to remove the listener - private readonly listener = ['message', (e: MessageEvent) => this.getEvent(e), false] as const - private container: any - private origin: string - private source: Window - private url: string - - constructor (public profile: IframeProfile) { - super(profile) - } - - /** Implement "activate" of the ViewPlugin */ - connect (url: string) { - this.profile.url = url - this.render() - } - - addToView () { - this.call(this.profile.location, 'addView', this.profile, this.container) - } - - shake (iframe: any) { - return new Promise((resolve, reject) => { - // Wait for the iframe to load and handshake - - if (!iframe.contentWindow) { - reject(new Error(`${this.name} plugin cannot find url ${this.profile.url}`)) - } - this.origin = new URL(iframe.src).origin - this.source = iframe.contentWindow - window.addEventListener(...this.listener) - this.handshake() - .then(resolve) - .catch(reject) - // - }) - } - - /** Implement "deactivate" of the ViewPlugin */ - disconnect () { - console.trace('disconnect') - window.removeEventListener(...this.listener) - return this.call(this.profile.location, 'removeView', this.profile) - .catch(console.error) - } - - /** Get message from the iframe */ - private async getEvent (event: MessageEvent) { - if (event.source !== this.source) return // Filter only messages that comes from this iframe - if (event.origin !== this.origin) return // Filter only messages that comes from this origin - const message: Message = event.data - this.getMessage(message) - } - - /** - * Post a message to the iframe of this plugin - * @param message The message to post - */ - protected send (message: Partial) { - if (!this.source) { - throw new Error('No window attached to Iframe yet') - } - this.source.postMessage(message, this.origin) - } - - /** Create and return the iframe */ - render () { - this.container = - this.addToView() - } -} - -export default IframeReactPlugin diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css index f9bd640d9c..d2b2133667 100644 --- a/libs/remix-ui/panel/src/lib/plugins/panel.css +++ b/libs/remix-ui/panel/src/lib/plugins/panel.css @@ -102,7 +102,7 @@ iframe { .terminal-wrap { min-height: 35px; - height: 30%; + height: 20%; } .terminal-wrap.minimized { 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 f3207f90bf..3cada8585b 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx @@ -6,7 +6,6 @@ import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web' import { localPluginReducerActionType, localPluginToastReducer } from '../reducers/pluginManagerReducer' import { canActivate, FormStateProps, PluginManagerComponent } from '../../types' -import { IframeReactPlugin } from '@remix-ui/app' interface LocalPluginFormProps { closeModal: () => void