From 57a198b11e0f23302eb18250c04a453edbedca92 Mon Sep 17 00:00:00 2001 From: joseph izang Date: Fri, 2 Jul 2021 11:55:05 +0100 Subject: [PATCH] trying to import react component --- .../components/plugin-manager-component.js | 79 ++++++++++++------- .../plugin-manager/src/customTypes.ts | 9 +++ .../src/lib/remix-ui-plugin-manager.tsx | 9 ++- libs/remix-ui/plugin-manager/tsconfig.json | 2 +- tsconfig.base.json | 50 ------------ tsconfig.json | 4 +- 6 files changed, 70 insertions(+), 83 deletions(-) delete mode 100644 tsconfig.base.json 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 9893496535..1ec2fb5994 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -1,5 +1,8 @@ import { IframePlugin, ViewPlugin, WebsocketPlugin } from '@remixproject/engine-web' import { PluginManagerSettings } from './plugin-manager-settings' +import React from 'react' +import { ReactDOM } from 'react-dom' +import { RemixUIPluginManager } from '@remix-ui/plugin-manager' import * as packageJson from '../../../../../package.json' const yo = require('yo-yo') const csjs = require('csjs-inject') @@ -96,6 +99,12 @@ class PluginManagerComponent extends ViewPlugin { this.appManager.event.on('deactivate', () => { this.reRender() }) this.engine = engine this.engine.event.on('onRegistration', () => { this.reRender() }) + this.htmlElement = document.createElement('div') + this.htmlElement.setAttribute('id', 'pluginManager') + } + + onActivation () { + this.renderComponent() } isActive (name) { @@ -188,8 +197,14 @@ class PluginManagerComponent extends ViewPlugin { } } + // return this.htmlElement() + + // render () { + // return this.htmlElement() + // } + render () { - // Filtering helpers + // Filtering helpers const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter) const isNotRequired = (profile) => !this.appManager.isRequired(profile.name) const isNotDependent = (profile) => !this.appManager.isDependent(profile.name) @@ -215,46 +230,52 @@ class PluginManagerComponent extends ViewPlugin { const activeTile = actives.length !== 0 ? yo` - ` + + ` : '' const inactiveTile = inactives.length !== 0 ? yo` - ` + + ` : '' const settings = new PluginManagerSettings().render() const rootView = yo` -
-
- - -
-
- ${activeTile} -
- ${actives.map(profile => this.renderItem(profile))} -
- ${inactiveTile} -
- ${inactives.map(profile => this.renderItem(profile))} -
-
- ${settings} -
- ` +
+
+ + +
+
+ ${activeTile} +
+ ${actives.map(profile => this.renderItem(profile))} +
+ ${inactiveTile} +
+ ${inactives.map(profile => this.renderItem(profile))} +
+
+ ${settings} +
+ ` if (!this.views.root) this.views.root = rootView return rootView } + renderComponent () { + ReactDOM.render(, this.htmElement) + } + reRender () { if (this.views.root) { yo.update(this.views.root, this.render()) diff --git a/libs/remix-ui/plugin-manager/src/customTypes.ts b/libs/remix-ui/plugin-manager/src/customTypes.ts index 5c0efa46e1..5004c94b60 100644 --- a/libs/remix-ui/plugin-manager/src/customTypes.ts +++ b/libs/remix-ui/plugin-manager/src/customTypes.ts @@ -18,3 +18,12 @@ export type Profile = { documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html', version: string } + +export type LocalPlugin = { + create: () => Profile + updateName: (target: string) => void + updateDisplayName: (displayName: string) => void + updateProfile: (key: string, e: Event) => void + updateMethods: (target: any) => void + form: () => HTMLElement +} diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx index 93f091f2a8..242a293d8c 100644 --- a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx @@ -1,9 +1,16 @@ import React from 'react' +import { Profile } from '../customTypes' import './remix-ui-plugin-manager.css' /* eslint-disable-next-line */ export interface RemixUiPluginManagerProps { - + activatePlugin: (name: string) => void + deActivatePlugin: (name: string) => void + isActive: () => void + openLocalPlugin: () => Promise + filterPlugins: () => void + reRender: () => void + profile: Profile } export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { diff --git a/libs/remix-ui/plugin-manager/tsconfig.json b/libs/remix-ui/plugin-manager/tsconfig.json index efb99f9af9..fda01bcde2 100644 --- a/libs/remix-ui/plugin-manager/tsconfig.json +++ b/libs/remix-ui/plugin-manager/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../../tsconfig.base.json", + "extends": "../../../tsconfig.json", "compilerOptions": { "jsx": "react", "allowJs": true, diff --git a/tsconfig.base.json b/tsconfig.base.json deleted file mode 100644 index fd6266ba13..0000000000 --- a/tsconfig.base.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "compileOnSave": false, - "compilerOptions": { - "rootDir": ".", - "sourceMap": true, - "declaration": false, - "moduleResolution": "node", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "importHelpers": true, - "target": "es2015", - "module": "commonjs", - "typeRoots": ["node_modules/@types"], - "lib": ["es2017", "es2019", "dom"], - "skipLibCheck": true, - "skipDefaultLibCheck": true, - "baseUrl": ".", - "paths": { - "@remix-project/remix-analyzer": ["dist/libs/remix-analyzer/index.js"], - "@remix-project/remix-astwalker": ["dist/libs/remix-astwalker/index.js"], - "@remix-project/remix-debug": ["dist/libs/remix-debug/src/index.js"], - "@remix-project/remix-lib": ["dist/libs/remix-lib/src/index.js"], - "@remix-project/remix-simulator": [ - "dist/libs/remix-simulator/src/index.js" - ], - "@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"], - "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"], - "@remix-project/remix-url-resolver": [ - "dist/libs/remix-url-resolver/index.js" - ], - "@remixproject/debugger-plugin": ["apps/debugger/src/index.ts"], - "@remix-project/remixd": ["dist/libs/remixd/index.js"], - "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"], - "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"], - "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"], - "@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"], - "@remix-project/remix-solidity-ts": ["libs/remix-solidity/src/index.ts"], - "@remix-ui/modal-dialog": ["libs/remix-ui/modal-dialog/src/index.ts"], - "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"], - "@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"], - "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"], - "@remix-ui/static-analyser": [ - "libs/remix-ui/static-analyser/src/index.ts" - ], - "@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"], - "@remix-ui/project-manager": ["libs/remix-ui/plugin-manager/src/index.ts"] - } - }, - "exclude": ["node_modules", "tmp"] -} diff --git a/tsconfig.json b/tsconfig.json index 573a63975e..85c784b3a1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -39,10 +39,10 @@ "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"], "@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"], "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"], - "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"], "@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"], "@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"], - "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"] + "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"], + "@remix-ui/plugin-manager": ["libs/remix-ui/plugin-manager/src/index.ts"] } }, "exclude": ["node_modules", "tmp"]